Elements

Button group

Two-action row that owns ordering and spacing while actions stay slotted.

Install

npx shadcn@latest add @alix/buttonGroup

Preview

Usage

<ButtonGroup
  primaryAction={<Button>Save brief</Button>}
  secondaryAction={<Button variant="outline">Cancel</Button>}
/>

Examples

Primary action only

Keep the same row component when a secondary action is intentionally absent.

<ButtonGroup primaryAction={<Button>Publish brief</Button>} />

Slots as links

Pass styled anchors through the slots when the actions navigate instead of mutating state.

View service Read insights

<ButtonGroup
  primaryAction={
    <Button render={<a href="/services/turnaround" />}>
      View service
    </Button>
  }
  secondaryAction={
    <Button variant="outline" render={<a href="/insights" />}>
      Read insights
    </Button>
  }
/>

Panel action pair

Use ButtonGroup inside a header action slot when two commands belong to the same framed workspace.

Engagement brief

Draft ready for partner review

The team has resolved the open diligence notes and updated the value creation plan.

<div className="w-full max-w-xl">
  <Panel
    title="Engagement brief"
    description="Draft ready for partner review"
    actions={
      <ButtonGroup
        primaryAction={<Button size="sm">Approve</Button>}
        secondaryAction={
          <Button size="sm" variant="outline">
            Return
          </Button>
        }
      />
    }
  >
    <p className="text-sm text-muted-foreground text-pretty">
      The team has resolved the open diligence notes and updated the
      value creation plan.
    </p>
  </Panel>
</div>

When to use it

Use it for

Two related actions in a form footer, modal footer, or panel header.
A primary action with one lower-emphasis alternative where ordering should stay consistent.
Slotting a Button, styled link, or custom control without mirroring that control's API.

Reach for something else

Rows with three or more actions — use Inline for visible controls or Menu for overflow commands.
Icon-only command clusters — use IconButton for each action, with Tooltip where the icon needs naming.
A full section heading with action slots — use SectionTitle instead.

Props

Prop	Type	Default	Description
primaryAction / secondaryAction	ReactNode	—	Action slots, not Button config objects, so callers can pass a Button, link, or custom control.