Button — Token Model (Shared for CTA, Icon, Link, Split)

button.bg.[appearance].[state]
button.text.[appearance].[state]
button.border.[appearance].[state]
button.icon.[appearance].[state]

button.size.[size]
button.size.[size].padding.x
button.size.[size].padding.y
button.size.[size].gap       // space between icon + label
button.size.[size].radius
button.size.[size].font

button.iconOnly.size.[size]
button.iconOnly.size.[size].padding
button.iconOnly.size.[size].icon

button.link.text.[appearance].[state]
button.link.underline.[appearance].[state]

button.split.main.bg.[appearance].[state]
button.split.main.text.[appearance].[state]
button.split.trigger.bg.[appearance].[state]
button.split.trigger.icon.[appearance].[state]
button.split.divider.[appearance]

You can plug in:

• [appearance] → primary, secondary, tertiary, inverse
• [state] → default, hover, pressed, focus, disabled, pending, danger
• [size] → small, large (or any sizes you use)

🧾 Quick Explanation

Core visual tokens

• button.bg.[appearance].[state]

  Background color for CTA + Icon + Split buttons.

  • CTA: main button background
  • Icon: icon-only background
  • Split: both main segment + trigger segment backgrounds reuse this

• button.text.[appearance].[state]

  Label text color for CTA + Split + Link style buttons.

• button.border.[appearance].[state]

  Border color when needed (outline, tertiary, focus).

• button.icon.[appearance].[state]

  Icon color when the button has leading / trailing icons, or is icon-only.

Sizing

• button.size.[size]

  Size preset for CTA and Split buttons.

  • Controls height, font size, paddings.

• button.size.[size].padding.x / .padding.y

  Inner spacing of the button content.

• button.size.[size].gap

  Space between icon and label.

• button.size.[size].radius

  Border radius for button corners.

• button.size.[size].font

  Text style used for that size.