Button Group
Button Group lays out a primary and secondary button together, and optionally a tertiary link-style control when type="link". Each button config accepts the same fields as Button (text, onClick, variant, destructive, disabled, and others).
Each button’s variant is only a default — pass variant on any of primaryButton / secondaryButton / tertiaryButton to swap it for any Button variant (default, secondary, ghost, link).
Loading Code Block...Pass primaryButton, secondaryButton, and tertiaryButton as inline object literals or variables, e.g. primaryButton={{ text: "Save", onClick: handleSave }}.
Bind the same objects with :primaryButton, :secondaryButton, :tertiaryButton (or :primary-button etc. in kebab-case).
Basic (default type)
Section titled “Basic (default type)”Horizontal layout, type="default", size="sm". With type="default", only primary and secondary are shown. tertiaryButton applies when type="link" (Link type).
Loading Code Block...Layout
Section titled “Layout”layout is horizontal or vertical. The dropdown updates the preview and the code sample.
Loading Code Block...Type (default | stretch | link)
Section titled “Type (default | stretch | link)”default— Buttons sit side by side with standard spacing.stretch— Buttons grow to fill the row width; the tertiary control is not used in this mode.link— Includes the tertiary link-style action alongside the two main buttons.
Loading Code Block...Link type
Section titled “Link type”The link type adds a tertiaryButton action alongside the primary and secondary buttons. In the example below the primary is icon-only (pass icon and leave text empty) while the tertiary keeps its default styling.
Loading Code Block...Sizes apply to every button in the group: xs, sm, md, lg, xl.
Loading Code Block...Destructive primary
Section titled “Destructive primary”Set destructive: true on primaryButton for dangerous actions. The preview below uses size="md".
Loading Code Block...| Props | Default | Type | Description |
|---|---|---|---|
| type | 'default' | 'default' | 'stretch' | 'link' | Layout mode: default row, stretched buttons, or link type with tertiary control. |
| layout | 'horizontal' | 'horizontal' | 'vertical' | Stack direction for the group. |
| size | 'md' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | Size applied to every button in the group. |
| primaryButton* | - | Button configuration object | Required in both frameworks. Inherits **[Button](/design-system/components/button/)** props. Defaults to `variant="default"`, but can be overridden per-instance with any Button variant. |
| secondaryButton | - | Button configuration object | Optional. Inherits Button props. Defaults to `variant="default"` + `isOutline`, but both can be overridden per-instance. |
| tertiaryButton | - | Button configuration object | Optional. Rendered only when `type="link"`. Defaults to `variant="link"`, but can be overridden per-instance. |