@wordpress/components Button variants not styled

Question

Whenever I import the Button component...

import { Button } from "@wordpress/components";

...and then use it with a variant:

if (attributes.imageId) {
  return (
    <Button variant="secondary" onClick={open}>
      Change image
    </Button>
  );
}
return (
  <Button variant="secondary" onClick={open}>
    Select image...
  </Button>
);

It never renders as the variant:

I'm certain this should be rendering differently based on these docs:

https://developer.wordpress.org/block-editor/reference-guides/components/button/

It should look something like this:

It also doesn't work if I use variant="primary"

Finally, the button is somewhat styled. That is, if I do this:

<Button>Test</Button>
<button>Test</button>

You can see the default button vs the wordpress button:

What am I doing wrong?

Package.json dependencies:

"dependencies": {
    "@wordpress/block-editor": "^7.0.2",
    "@wordpress/blocks": "^11.1.0",
    "@wordpress/i18n": "^4.2.2"
},
"devDependencies": {
    "@wordpress/scripts": "^18.0.1"
}

Answer 1

The WordPress components docs are pulled from the development branch of the repository, meaning they may describe features and functionality that have yet to be released.

With the current version of the library used in WordPress, you declare the variant with the isPrimary, isSecondary, or isTertiary property:

<Button isSecondary onClick={open}>
    Select image...
</Button>