Button Group

Groups multiple buttons together.

Examples

Default

<script setup>
import { ButtonGroup, Button } from '@empathyds/vue'
</script>

<ButtonGroup>
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>

Outline (Vertical)

<script setup>
import { ButtonGroup, Button } from '@empathyds/vue'
import { Plus, Minus } from 'lucide-vue-next'
</script>

<ButtonGroup orientation="vertical">
  <Button variant="outline" size="icon"><Plus /></Button>
  <Button variant="outline" size="icon"><Minus /></Button>
</ButtonGroup>

Props

ButtonGroup

Prop	Type	Default	Description
orientation	'horizontal' | 'vertical'	'horizontal'	The layout direction of the button group.
class	string	-	Additional CSS classes to apply.

Slots

ButtonGroup

Slot	Description
default	The buttons to group together.