Button

actions

Buttons communicate actions that users can take. They help users interact with and take action on content.

Variants

Filled

Default

High-emphasis buttons for primary, important, or final actions.

Outlined

Medium-emphasis buttons for important actions that don't distract from other content.

Text

Low-emphasis buttons for less important actions, often used in cards and dialogs.

Elevated

Medium-emphasis buttons that lift up from the page with shadow.

Tonal

Medium-emphasis buttons using secondary container color.

Properties

Name Type Required Default Description
variant enum - filled Visual style of the button
disabled boolean - - Whether the button is disabled
icon node - - Optional leading icon
trailingIcon boolean - - Whether icon appears after text

States

enabled

Default interactive state

disabled

Non-interactive state

hovered

Mouse hover state

focused

Keyboard focus state

pressed

Active/pressed state

Accessibility

Role: button
Keyboard Support:
  • Enter - Activate the button
  • Space - Activate the button
Screen Reader Notes: Announce button label and state. For icon-only buttons, provide aria-label.

LLM Context

Intent: Trigger user actions and form submissions
Anti-Patterns:
  • Multiple filled buttons in the same view - use one primary action
  • Icon-only button without aria-label
  • Disabled button without explanation why
  • Using button for navigation instead of link
Example Usage: 
<Button variant="filled">Submit</Button>
<Button variant="outlined" icon={<AddIcon />}>Add Item</Button>
<Button variant="text" disabled>Loading...</Button>