Follows your naming logic:
button.bg.[appearance].[state]
button.text.[appearance].[state]
button.border.[appearance].[state]
button.icon.[appearance].[state]
Consistent with CTA, Icon Button, Link Button, and Split Button.
Below you get:
Primary — Secondary — Tertiary — Inverse
Default — Hover — Pressed — Focus — Disabled — Pending — Danger
Background — Border — Text — Icon
| State | Background | Border | Text | Icon |
|---|---|---|---|---|
| Default | button.bg.primary.default |
button.border.primary.default |
button.text.primary.default |
button.icon.primary.default |
| Hover | button.bg.primary.hovered |
button.border.primary.hovered |
button.text.primary.hovered |
button.icon.primary.hovered |
| Pressed | button.bg.primary.pressed |
button.border.primary.pressed |
button.text.primary.pressed |
button.icon.primary.pressed |
| Focus | button.bg.primary.focused |
button.border.focus |
button.text.primary.focused |
button.icon.primary.focused |
| Disabled | button.bg.disabled |
button.border.disabled |
button.text.disabled |
button.icon.disabled |
| Pending | button.bg.primary.pending |
button.border.primary.pending |
button.text.primary.pending |
button.icon.primary.pending |
| Danger | button.bg.primary.danger |
button.border.primary.danger |
button.text.primary.danger |
button.icon.primary.danger |