Example
Props
Disabled
To disable a button, use the isDisabled prop.
Prominence
Low prominence
By default, action buttons have a visible background. This variant works best in a dense array of controls where the background helps to separate action buttons from the surrounding container, or to give visibility to isolated buttons.
Alternatively, “low” prominence action buttons have no visible background until they’re interacted with. This variant works best when a clear layout (vertical stack, table, grid) makes it easy to parse the buttons.
Slots
Buttons are composed of slot components.
Icon
Place an Icon next to the label to both clarify an action and call attention to a button.
When accompanying an icon, button labels must be wrapped with a Text component.
Icon only
If no label is provided (e.g. an icon only button), an alternative text label must be provided to identify the control for accessibility. This should be added using the aria-label prop.
You could also wrap the button with a Tooltip, which will provide the appropriate accessibility attributes to the button.