Skip to main content

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.

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 through aria-label and a presentational tooltip so the name is not announced twice. Prefer press handlers that work for click, touch, and keyboard activation together.
Last modified on July 24, 2026