Buttons

Complete button system — 4 sizes, 6 types, 4 states, 5 content configurations, plus error variants.

Size Reference

Size Text Pad Y Pad X Radius Icon Gap Dot Icon Only IO Pad
Small12px / 16px6px12px8px14x146px8x816x166px
Default13px / 16px8px16px8px16x168px8x818x188px
Medium14px / 20px10px18px8px18x188px8x820x2010px
Large16px / 24px12px20px8px20x208px8x820x2014px

Primary

Text Only .btn .btn--primary
Default Hover Active Disabled
Icon + Text .btn .btn--primary .btn--icon-left
Text + Icon .btn .btn--primary .btn--icon-right
Dot + Text .btn .btn--primary .btn--dot
Icon Only .btn .btn--primary .btn--icon-only

Primary Error

Text Only .btn .btn--primary .btn--error
Default Hover Active Disabled
Icon + Text .btn .btn--primary .btn--error .btn--icon-left
Text + Icon .btn .btn--primary .btn--error .btn--icon-right
Dot + Text .btn .btn--primary .btn--error .btn--dot
Icon Only .btn .btn--primary .btn--error .btn--icon-only

Secondary

Text Only .btn .btn--secondary
Default Hover Active Disabled
Icon + Text .btn .btn--secondary .btn--icon-left
Text + Icon .btn .btn--secondary .btn--icon-right
Dot + Text .btn .btn--secondary .btn--dot
Icon Only .btn .btn--secondary .btn--icon-only

Secondary Error

Text Only .btn .btn--secondary .btn--error
Default Hover Active Disabled
Icon + Text .btn .btn--secondary .btn--error .btn--icon-left
Text + Icon .btn .btn--secondary .btn--error .btn--icon-right
Dot + Text .btn .btn--secondary .btn--error .btn--dot
Icon Only .btn .btn--secondary .btn--error .btn--icon-only

Tertiary

Text Only .btn .btn--tertiary
Default Hover Active Disabled
Icon + Text .btn .btn--tertiary .btn--icon-left
Text + Icon .btn .btn--tertiary .btn--icon-right
Dot + Text .btn .btn--tertiary .btn--dot
Icon Only .btn .btn--tertiary .btn--icon-only

Tertiary Error

Text Only .btn .btn--tertiary .btn--error
Default Hover Active Disabled
Icon + Text .btn .btn--tertiary .btn--error .btn--icon-left
Text + Icon .btn .btn--tertiary .btn--error .btn--icon-right
Dot + Text .btn .btn--tertiary .btn--error .btn--dot
Icon Only .btn .btn--tertiary .btn--error .btn--icon-only

Ghost

Text Only .btn .btn--ghost
Default Hover Active Disabled
Icon + Text .btn .btn--ghost .btn--icon-left
Text + Icon .btn .btn--ghost .btn--icon-right
Dot + Text .btn .btn--ghost .btn--dot
Icon Only .btn .btn--ghost .btn--icon-only

Ghost Error

Text Only .btn .btn--ghost .btn--error
Default Hover Active Disabled
Icon + Text .btn .btn--ghost .btn--error .btn--icon-left
Text + Icon .btn .btn--ghost .btn--error .btn--icon-right
Dot + Text .btn .btn--ghost .btn--error .btn--dot
Icon Only .btn .btn--ghost .btn--error .btn--icon-only

Text Button

Text Only .btn .btn--text
Default Hover Active Disabled
Icon + Text .btn .btn--text .btn--icon-left
Text + Icon .btn .btn--text .btn--icon-right
Dot + Text .btn .btn--text .btn--dot
Icon Only .btn .btn--text .btn--icon-only

Text Button Error

Text Only .btn .btn--text .btn--error
Default Hover Active Disabled
Icon + Text .btn .btn--text .btn--error .btn--icon-left
Text + Icon .btn .btn--text .btn--error .btn--icon-right
Dot + Text .btn .btn--text .btn--error .btn--dot
Icon Only .btn .btn--text .btn--error .btn--icon-only

Secondary Text Button

Text Only .btn .btn--secondary-text
Default Hover Active Disabled
Icon + Text .btn .btn--secondary-text .btn--icon-left
Text + Icon .btn .btn--secondary-text .btn--icon-right
Dot + Text .btn .btn--secondary-text .btn--dot
Icon Only .btn .btn--secondary-text .btn--icon-only

Secondary Text Button Error

Text Only .btn .btn--secondary-text .btn--error
Default Hover Active Disabled
Icon + Text .btn .btn--secondary-text .btn--error .btn--icon-left
Text + Icon .btn .btn--secondary-text .btn--error .btn--icon-right
Dot + Text .btn .btn--secondary-text .btn--error .btn--dot
Icon Only .btn .btn--secondary-text .btn--error .btn--icon-only