---
title: "Button Group"
url: "https://developer.incode.com/design-and-ux/button-group/"
section: "design-and-ux"
group: "Prizma Design Foundations / Components"
version: "v1.1"
status: "live"
---
# Button Group

Button groups define how multiple buttons are arranged in a flow. Four orientations — vertical and horizontal, each with a normal and reversed variant — cover every layout pattern in Prizma flows.

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

<div class="dh-var-grid"><div class="dh-var" style="background:#006aff08"><div class="dh-var-stage"><span class="dh-pz-btngroup"><button class="dh-pz-btn dh-pz-btn-primary" type="button">Continue</button><button class="dh-pz-btn dh-pz-btn-secondary" type="button">Go back</button></span></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#006aff14;color:#006aff">Vertical</span><code>.btn-group--vertical</code><p>Stacked full-width buttons — the default on mobile verification flows. Primary on top.</p></div></div><div class="dh-var" style="background:transparent"><div class="dh-var-stage"><span class="dh-pz-btngroup is-horizontal"><button class="dh-pz-btn dh-pz-btn-secondary" type="button">Cancel</button><button class="dh-pz-btn dh-pz-btn-primary" type="button">Confirm</button></span></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#60667c14;color:#60667c">Horizontal</span><code>.btn-group--horizontal</code><p>Side-by-side pair for dialogs and wide layouts. Primary sits on the right.</p></div></div></div>

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

```dh-comp-tokens
--scale-12 | Gap between buttons in a group | Primitive
--btn-primary-surface-* | All primary button tokens | Component
--btn-secondary-border-* | All secondary button tokens | Component
--radius-button | Corner radius on all buttons | Semantic
```

> 📘 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.