COMPONENTS · BUTTON

Button

DESCRIPTION

A button is an interactive control that allows users to trigger an action or initiate a process.

PLAYGROUND MODE

Actions from the CAS Figma component set, mapped to React with the same type, size, state, treatment, label, and icon properties.

PlaygroundCurrent theme

90 FIGMA VARIANTS

Six supported styles × three sizes × five states

The Figma component does not support every Type × Solid combination. Primary, Tertiary, and Danger are Solid; Neutral is Outline; Secondary supports both treatments.

Styledefaulthoverfocusloadingdisabled

Primary · Solid

Secondary · Solid

Tertiary · Solid

Danger · Solid

Secondary · Outline

Neutral · Outline

ICON SLOTS

Leading and trailing icons are independent

Each icon slot is a boolean show/hide — matching the Figma instance-swap property. A button with no icons at all is just as valid as one with both.

Both icons

Leading only

Trailing only

No icons

SIZE

Three fixed heights

large56 px

medium48 px

small40 px

TOKENS & TYPOGRAPHY

Implementation bindings

Primarycolor/action/primary/{base, dark, lighter}

Secondarycolor/action/secondary/{base, dark, lighter}

Tertiarycolor/action/tertiary/{base, dark, lighter}

Dangercolor/feedback/error/{base, dark, lighter}

Neutralcolor/action/neutral/{base, dark, lighter}

LabelNunito Sans · 14 px · Semibold 600

Small labelNunito Sans · 12 px · Semibold 600

Corner radiusradius/12 · 12 px

COMPONENT STRUCTURE

01Type · Primary, Secondary, Tertiary, Danger, Neutral

02Size · Large (56), Medium (48), Small (40)

03State · Default, Hover, Focus, Loading, Disabled

04Treatment · Solid or Outline where supported

05Label · Editable text

06Icon Leading · Boolean + instance swap

07Icon Trailing · Boolean + instance swap

COMPONENTS · BUTTON

Button

DESCRIPTION

A button is an interactive control that allows users to trigger an action or initiate a process.

PLAYGROUND MODE

Actions from the CAS Figma component set, mapped to React with the same type, size, state, treatment, label, and icon properties.

PlaygroundCurrent theme

90 FIGMA VARIANTS

Six supported styles × three sizes × five states

The Figma component does not support every Type × Solid combination. Primary, Tertiary, and Danger are Solid; Neutral is Outline; Secondary supports both treatments.

Styledefaulthoverfocusloadingdisabled

Primary · Solid

Secondary · Solid

Tertiary · Solid

Danger · Solid

Secondary · Outline

Neutral · Outline

ICON SLOTS

Leading and trailing icons are independent

Each icon slot is a boolean show/hide — matching the Figma instance-swap property. A button with no icons at all is just as valid as one with both.

Both icons

Leading only

Trailing only

No icons

SIZE

Three fixed heights

large56 px

medium48 px

small40 px

TOKENS & TYPOGRAPHY

Implementation bindings

Primarycolor/action/primary/{base, dark, lighter}

Secondarycolor/action/secondary/{base, dark, lighter}

Tertiarycolor/action/tertiary/{base, dark, lighter}

Dangercolor/feedback/error/{base, dark, lighter}

Neutralcolor/action/neutral/{base, dark, lighter}

LabelNunito Sans · 14 px · Semibold 600

Small labelNunito Sans · 12 px · Semibold 600

Corner radiusradius/12 · 12 px

COMPONENT STRUCTURE

01Type · Primary, Secondary, Tertiary, Danger, Neutral

02Size · Large (56), Medium (48), Small (40)

03State · Default, Hover, Focus, Loading, Disabled

04Treatment · Solid or Outline where supported

05Label · Editable text

06Icon Leading · Boolean + instance swap

07Icon Trailing · Boolean + instance swap