Button group

Group related buttons into one control.

import { BuiButtonGroup, BuiButtonGroupText, BuiButton } from 'ng-blatui';

<div buiButtonGroup>
  <button buiButton variant="outline">Previous</button>
  <button buiButton variant="outline">Next</button>
</div>

With icon

<div buiButtonGroup>
  <button buiButton variant="outline" size="icon" aria-label="Align left">…</button>
  <button buiButton variant="outline" size="icon" aria-label="Align center">…</button>
</div>

Vertical

<div buiButtonGroup orientation="vertical">
  <button buiButton variant="outline">Archive</button>
  <button buiButton variant="outline">Delete</button>
</div>

Split

<div buiButtonGroup>
  <button buiButton variant="outline"><svg><!-- save --></svg> Save</button>
  <button buiButton variant="outline" size="icon" aria-label="More">…</button>
</div>

Solid

<div buiButtonGroup class="*:not-last:border-primary-foreground/25 *:not-last:border-r">
  <button buiButton>Day</button><button buiButton>Week</button><button buiButton>Month</button>
</div>

With text

https://

<div buiButtonGroup>
  <span buiButtonGroupText>https://</span>
  <input buiInput placeholder="example.com" class="rounded-l-none" />
</div>

Nested

<div buiButtonGroup>
  <div buiButtonGroup>…undo / redo…</div>
  <div buiButtonGroup>…bold / italic…</div>
</div>

With separator

<div buiButtonGroup>
  <button buiButton variant="outline">Copy</button>
  <div class="bg-border w-px self-stretch" aria-hidden="true"></div>
  <button buiButton variant="outline">Paste</button>
</div>