Button Group

Groups related buttons together, sharing a single outline.

Installation

uvx django_shadcn@latest add button_group

Usage

<c-button-group>
  <c-button variant="outline">Day</c-button>
  <c-button variant="outline">Week</c-button>
</c-button-group>

The group flattens the inner corners and drops the duplicated borders through descendant selectors, so the buttons need nothing special.

Examples

Vertical

<c-button-group orientation="vertical">
  <c-button variant="outline">Top</c-button>
  <c-button variant="outline">Bottom</c-button>
</c-button-group>

With text

https://

<c-button-group>
  <c-button-group.text>https://</c-button-group.text>
  <c-input placeholder="example.com" />
  <c-button variant="outline">Go</c-button>
</c-button-group>

With a separator

<c-button-group>
  <c-button>Save</c-button>
  <c-button-group.separator />
  <c-button size="icon">
    <c-icon name="chevron-down" />
  </c-button>
</c-button-group>

Nested groups

<c-button-group>
  <c-button-group>...</c-button-group>
  <c-button-group>...</c-button-group>
</c-button-group>