ButtonGroup

Hero example

When to use

ButtonGroup is the canonical placement for a card's actions — typically 2-3 buttons in the footer of an inline card, aligned to the trailing edge. Use align="end" for the canonical card footer; align="between" when one action sits at each end; align="stretch" when the buttons need to fill the available width equally.

For a single CTA, just render <Button> — no need for the group.

Anatomy

display: flex, flexWrap: wrap, alignItems: center, justifyContent controlled by align. Token gap defaults to 10.

Props

In Dynamic Cards

This primitive's type is "ButtonGroup". Each child is a Button with a CardAction payload:

{
  "type": "ButtonGroup",
  "align": "end",
  "children": [
    { "type": "Button", "label": "Adjust shares",  "intent": "secondary", "action": { "kind": "regenerate", "hint": "make it 40,000 shares" } },
    { "type": "Button", "label": "Open in Equity", "intent": "secondary", "action": { "kind": "navigate", "to": "/equity/grants/grt_…" } },
    { "type": "Button", "label": "Approve grant",  "intent": "primary",   "action": { "kind": "approve", "resource_id": "grt_…" } }
  ]
}

The primary CTA is always last (Mac-style) so the eye lands on it after scanning the row.

Source