---
title: "Button"
url: "https://developer.incode.com/design-and-ux/button/"
section: "design-and-ux"
group: "Prizma Design Foundations / Components"
version: "v1.1"
status: "live"
---
# 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.

<div class="dh-demo"><p class="dh-demo-label">Interactive — hover / press / focus</p><button class="dh-pz-btn dh-pz-btn-primary" type="button">Verify identity</button><button class="dh-pz-btn dh-pz-btn-secondary" type="button">Cancel</button><button class="dh-pz-btn dh-pz-btn-tertiary" type="button">Skip for now</button><button class="dh-pz-btn dh-pz-btn-primary" type="button" disabled>Verify identity</button></div>

<div class="dh-rule"><span>Variants</span><i></i></div>

<div class="dh-var-grid"><div class="dh-var" style="background:#006aff08"><div class="dh-var-stage"><button class="dh-pz-btn dh-pz-btn-primary" type="button">Verify identity</button></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#006aff14;color:#006aff">Primary</span><code>.btn-primary</code><p>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.</p></div></div><div class="dh-var" style="background:transparent"><div class="dh-var-stage"><button class="dh-pz-btn dh-pz-btn-secondary" type="button">Cancel</button></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#60667c14;color:#60667c">Secondary</span><code>.btn-secondary</code><p>Supporting or dismissive action. Sits alongside the primary but never competes with it — go back, cancel, or dismiss a flow.</p></div></div><div class="dh-var" style="background:transparent"><div class="dh-var-stage"><button class="dh-pz-btn dh-pz-btn-tertiary" type="button">Skip for now</button></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#9ca3af14;color:#9ca3af">Tertiary</span><code>.btn-tertiary</code><p>Text-link style. Optional steps or navigation that shouldn’t disrupt the flow.</p></div></div></div>

<div class="dh-rule"><span>States</span><i></i></div>

## Every state, every variant

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

<div class="dh-stage"><button class="dh-pz-btn dh-pz-btn-primary" type="button">Default</button><button class="dh-pz-btn dh-pz-btn-primary is-hover" type="button">Hover</button><button class="dh-pz-btn dh-pz-btn-primary is-pressed" type="button">Pressed</button><button class="dh-pz-btn dh-pz-btn-primary" type="button" disabled>Disabled</button></div>

<div class="dh-stage"><button class="dh-pz-btn dh-pz-btn-secondary" type="button">Default</button><button class="dh-pz-btn dh-pz-btn-secondary is-hover" type="button">Hover</button><button class="dh-pz-btn dh-pz-btn-secondary is-pressed" type="button">Pressed</button><button class="dh-pz-btn dh-pz-btn-tertiary" type="button">Tertiary</button></div>

<div class="dh-rule"><span>Tokens</span><i></i></div>

```dh-comp-tokens
--btn-primary-surface-default | Primary background — rest | Component
--btn-primary-surface-hover | Primary background — hover | Component
--btn-primary-surface-pressed | Primary background — active | Component
--btn-primary-surface-disabled | Primary background — disabled | Component
--btn-primary-text-default | Primary label — rest | Component
--btn-primary-text-disabled | Primary label — disabled | Component
--btn-secondary-border-default | Secondary border — rest | Component
--btn-secondary-border-hover | Secondary border — hover | Component
--btn-secondary-border-pressed | Secondary border — active | Component
--btn-secondary-border-disabled | Secondary border — disabled | Component
--btn-tertiary-text-default | Tertiary label — rest | Component
--btn-tertiary-text-disabled | Tertiary label — disabled | Component
--radius-button | Corner radius — all variants | Semantic
--font-size-button-m | Label font size — M | Primitive
```

> 📘 Component tokens
>
> The color tokens for this component live in [Color → Tokens](/design-and-ux/color/), and its spacing, radius, and type map to the shared foundation scales.