Button Group

Open in GitHub

Open in Figma

A set of related buttons grouped together, with support for horizontal or vertical layouts.

1
---
2
import { Button } from '@bejamas/ui/components/button';
3
import { ButtonGroup } from '@bejamas/ui/components/button-group';
4
---
5

6
<ButtonGroup>
7
  <Button variant="outline">Left</Button>
8
  <Button variant="outline">Middle</Button>
9
  <Button variant="outline">Right</Button>
10
</ButtonGroup>

Installation

bunx bejamas add button-group

npx bejamas add button-group

pnpm dlx bejamas add button-group

yarn dlx bejamas add button-group

Usage

1
---
2
import { ButtonGroup } from '@bejamas/ui/components/button-group';
3
import { Button } from '@bejamas/ui/components/button';
4
---
5
<ButtonGroup>
6
  <Button>One</Button>
7
  <Button>Two</Button>
8
  <Button>Three</Button>
9
</ButtonGroup>

Props

Prop	Type	Default
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
`class`	`string`	`""`

Examples

Orientation

1
---
2
import { MinusIcon, PlusIcon } from '@lucide/astro';
3

4
import { Button } from '@bejamas/ui/components/button';
5
import { ButtonGroup } from '@bejamas/ui/components/button-group';
6
---
7

8
<ButtonGroup orientation="vertical" aria-label="Media controls" class="h-fit">
9
  <Button variant="outline" size="icon">
10
    <PlusIcon />
11
  </Button>
12
  <Button variant="outline" size="icon">
13
    <MinusIcon />
14
  </Button>
15
</ButtonGroup>

Size

1
---
2
import { PlusIcon } from '@lucide/astro';
3

4
import { Button } from '@bejamas/ui/components/button';
5
import { ButtonGroup } from '@bejamas/ui/components/button-group';
6
---
7

8
<div class="flex flex-col items-start gap-8">
9
  <ButtonGroup>
10
    <Button variant="outline" size="sm">
11
      Small
12
    </Button>
13
    <Button variant="outline" size="sm">
14
      Button
15
    </Button>
16
    <Button variant="outline" size="sm">
17
      Group
18
    </Button>
19
    <Button variant="outline" size="icon-sm">
20
      <PlusIcon />
21
     </Button>
22
  </ButtonGroup>
23
  <ButtonGroup>
24
    <Button variant="outline">Default</Button>
25
    <Button variant="outline">Button</Button>
26
    <Button variant="outline">Group</Button>
27
    <Button variant="outline" size="icon">
28
      <PlusIcon />
29
    </Button>
30
  </ButtonGroup>
31
  <ButtonGroup>
32
    <Button variant="outline" size="lg">
33
      Large
34
    </Button>
35
    <Button variant="outline" size="lg">
36
      Button
37
    </Button>
38
    <Button variant="outline" size="lg">
39
      Group
40
    </Button>
41
    <Button variant="outline" size="icon-lg">
42
      <PlusIcon />
43
    </Button>
44
  </ButtonGroup>
45
</div>