Buttons

Buttons are interactive elements that allow users to perform actions. They can be styled in various ways to indicate their purpose and importance.

Types

filled-button

tonal-button

Variations

text only

leading icon

trailing icon

icon only

Sizes

Large

text only

leading icon

trailing icon

icon only

Medium

text only

leading icon

trailing icon

icon only

Small

text only

leading icon

trailing icon

icon only

Styles

default

primary

default

secondary

default

strict

default

neutral

default

destructive

States

default

primary

hover

primary

active

primary

focus

primary

loading

primary

disabled

primary

default

secondary

hover

secondary

active

secondary

focus

secondary

loading

secondary

disabled

secondary

default

strict

hover

strict

active

strict

focus

strict

loading

strict

disabled

strict

default

neutral

hover

neutral

active

neutral

focus

neutral

loading

neutral

disabled

neutral

default

destructive

hover

destructive

active

destructive

focus

destructive

loading

destructive

disabled

destructive

Button Sizes

Button Shapes

Button Circular Sizes

Outline Buttons

Loading Buttons

Disabled Buttons

Button Text

default

primary

hover

primary

active

primary

focus

primary

loading

primary

disabled

primary

default

strict

hover

strict

active

strict

focus

strict

loading

strict

disabled

strict

default

destructive

hover

destructive

active

destructive

focus

destructive

loading

destructive

disabled

destructive

Button Variants

horizontal-stack

vertical-stack