Buttons

Buttons may use the <button> or <a> tags. See examples below for how to style buttons

Defaults

I’m a button I’m an anchor button

I'm a button
I'm an anchor button

As you can see the default button has no color styles applied. It is expected to add a modifier class to support styling a button. For example: .button .button--primary

Button Types

Primary Secondary Critical Inverse Success Warning Info

Types Example

Primary
Secondary
Critical
Inverse
Success
Warning
Info

Button States

Active Disabled Pulsing

States Example

Active
Disabled
Pulsing

Sizes

Large Default Small Extra Small Full

Sizes Example

Large
Default
Small
Extra Small

Full

Combinations

Large Primary <a> Default Critical Small Info Extra Small Inverse Large Inverse Disabled Default Critical Disabled Large Flat

Combinations Example

Large Primary <a>
Default Critical
Small Info
Extra Small Inverse
Large Inverse Disabled
Default Critical Disabled
Large Flat