Options
The Button supports variants, sizes, and icon configurations to fit different action hierarchies.Variants
Sizes
Icons
Icons can sit before or after the label, or replace the label entirely. Icon-only buttons keep a short label for accessibility and show that label in a tooltip on hover and focus.Behavior
The Button responds to pointer, touch, and keyboard interaction with clear resting, hover, pressed, focused, and disabled states.Visual States
Hover and press update the surface to confirm the control is interactive. Keyboard focus shows a visible focus ring. Disabled buttons remain in the tab order where appropriate but do not activate.Icon-only labeling
Icon-only buttons always carry a required label. That label becomes the accessible name and the tooltip content so pointer and assistive-technology users share the same affordance name.Usage Guidelines
When to Use
Use the Button when:- Triggering an action – A user needs to run a command or event, such as adding or editing an item.
- Marking the main action – One action leads the view. Use the primary variant, and prefer one primary action in the same context.
- Confirming a destructive action – The action deletes data or can’t be undone. Use the danger variant so the caution is clear.
- Compact icon controls – Space is tight and an icon communicates the action. Use an icon-only Button with a short label, which also appears as its tooltip.
When not to use
Avoid using the Button for:- Navigating to another page or location – Use the Link instead.
- Holding a persistent on/off state – Use the Button Toggle instead.
- Offering follow-up prompts after an agent response – Use the Suggestion instead.
Keyboard Interaction
Users can activate the Button using standard keyboard controls.Accessibility
Every Button requires a label so it always has an accessible name. Icon-only buttons expose that label througharia-label and a presentational tooltip so the name is not announced twice. Prefer press handlers that work for click, touch, and keyboard activation together.