ButtonGroup

A ButtonGroup is used to group child Button components together as a single element. They can be used to create a segmented control for plain buttons with an on:click directive.

Example

<script>
  import { ButtonGroup, Button } from '$lib/ui';
  let whichway = $state();

  function handleClick(val) {
    whichway = val;
  }
</script>

<ButtonGroup>
  <Button
    on:click={() => handleClick('left')}
    active={whichway === 'left'}
  >
    Left
  </Button>
  <Button
    on:click={() => handleClick('middle')}
    active={whichway === 'middle'}
  >
    Middle
  </Button>
  <Button
    on:click={() => handleClick('right')}
    active={whichway === 'right'}
  >
    Right
  </Button>
</ButtonGroup>

<p>whichway: {whichway}</p>

whichway:

Size

Use the size prop on the ButtonGroup to set the size for all child Buttons.

<ButtonGroup size="sm">
  <Button>A</Button>
  <Button>B</Button>
  <Button>C</Button>
</ButtonGroup>

ButtonGroup Component Props

ButtonGroup CSS Custom Properties