Button

Buttons trigger actions. Prizma has three variants — primary, secondary, and tertiary — each scoped to a different visual weight and use case. All powered by the same token layer.

Try it live

Hover, press, and tab through them — every state comes straight from the button tokens.

Interactive — hover / press / focus

Variants

Primary.btn-primary

The main call to action. Signals the most important next step — one per screen. Verb-first labels (Verify, Continue, Confirm); full width on mobile flows.

Secondary.btn-secondary

Supporting or dismissive action. Sits alongside the primary but never competes with it — go back, cancel, or dismiss a flow.

Tertiary.btn-tertiary

Text-link style. Optional steps or navigation that shouldn’t disrupt the flow.

States

Every state, every variant

Hover, pressed, and disabled states are baked into the token layer. They respond automatically — no overrides needed.

Tokens

TokenRoleLayer

--btn-primary-surface-defaultPrimary background — restComponent

--btn-primary-surface-hoverPrimary background — hoverComponent

--btn-primary-surface-pressedPrimary background — activeComponent

--btn-primary-surface-disabledPrimary background — disabledComponent

--btn-primary-text-defaultPrimary label — restComponent

--btn-primary-text-disabledPrimary label — disabledComponent

--btn-secondary-border-defaultSecondary border — restComponent

--btn-secondary-border-hoverSecondary border — hoverComponent

--btn-secondary-border-pressedSecondary border — activeComponent

--btn-secondary-border-disabledSecondary border — disabledComponent

--btn-tertiary-text-defaultTertiary label — restComponent

--btn-tertiary-text-disabledTertiary label — disabledComponent

--radius-buttonCorner radius — all variantsSemantic

--font-size-button-mLabel font size — MPrimitive

Component tokens

The color tokens for this component live in Color → Tokens, and its spacing, radius, and type map to the shared foundation scales.