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).
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 link-style action alongside the primary and secondary buttons.
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; rendered with `variant="default"`. React typing uses `ExtendedButtonProps` (derived from `Button`), so TypeScript consumers get full IntelliSense. |
| secondaryButton | - | Button configuration object | Optional. Inherits Button props; rendered as outline secondary (`variant="default"` + `isOutline`). |
| tertiaryButton | - | Button configuration object | Optional. Rendered only when `type="link"`; link-styled tertiary action (`variant="link"`). |