Components

Button

Buttons allow users to take actions and make choices with a single tap.

Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:

Modal windows
Forms
Cards
Toolbars

Basic button

The Button comes in five variants: primary (default), secondary, tertiary, ghost, and danger.

Variants

Primary button

Primary buttons are high-emphasis, distinguished by their use of fill and elevation. They contain actions that are primary to your app.

Link

Secondary button

Secondary buttons are used for secondary actions. They use the accent color to distinguish them from primary actions.

Link

Tertiary button

Tertiary buttons are medium-emphasis buttons. They contain actions that are important but aren't the primary action in an app.

Link

Ghost button

Ghost buttons are low-emphasis buttons typically used for less important actions. They have no background until hovered.

Link

Sizes

For larger or smaller buttons, use the size prop.

Primary

Secondary

Tertiary

Buttons with icons

Sometimes you might want to have icons for certain buttons to enhance the UX of the application as we recognize logos more easily than plain text.

Start icon

End icon

Icon sizes by button size

Icon button

Icon buttons are commonly found in app bars and toolbars. Icons are also appropriate for toggle buttons that allow a single choice to be selected or deselected.

Sizes

Variants

Rounded

Loading

Use the loading prop to set buttons in a loading state and disable interactions. Click the buttons below to see the loading state.

Click to see loading

Loading position

Disabled

Use the disabled prop to disable buttons and prevent user interaction.

Button group

The ButtonGroup component can be used to group related buttons.

Basic group

Sizes

Compact

Default

Relaxed

API

See the documentation below for a complete reference to all of the props and classes available to the Button component.

Button Props

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'tertiary' \| 'ghost' \| 'danger'`	`'primary'`	The variant to use.
`size`	`'compact' \| 'default' \| 'relaxed'`	`'default'`	The size of the button.
`type`	`'button' \| 'reset' \| 'submit'`	`'button'`	The native HTML button type. Ignored when `href` is set.
`disabled`	`boolean`	`false`	If true, the button is disabled.
`loading`	`boolean`	`false`	If true, shows a loading spinner.
`loadingText`	`string`	—	Text to show while loading.
`startIcon`	`ReactNode`	—	Element placed before the children.
`endIcon`	`ReactNode`	—	Element placed after the children.
`fullWidth`	`boolean`	`false`	If true, the button takes the full width of its container.
`href`	`string`	—	The URL to link to. If set, renders as an anchor element.