Skip to content

Buttons ​

Square brackets create a button. Add * for primary variant.

Basic ​

[Cancel] [Save]*

Variants ​

[Default] [Primary]* [Secondary]{secondary} [Danger]{danger}

Disabled ​

[Submit]{disabled}

Sizes ​

[Small]{small} [Default] [Large]{large}

With Icons ​

[:search: Search] [+ New Item]* [Delete]{danger}

Syntax ​

[Label]                      default button
[Label]*                     primary (preferred shorthand)
[Label]{primary}             primary
[Label]{secondary}           secondary
[Label]{danger}              danger/destructive
[Label]{disabled}            disabled
[Label]{loading}             loading
[Label]{large}               large
[Label]{small}               small
[A] [B] [C]                  inline action row

Advanced: {variant:primary} / {state:disabled} still work. Dot-prefixed tokens like {.primary} are raw CSS classes.