Button Group

Joins related buttons into a single segmented control.

<script lang="ts">
  import {
    ButtonGroup,
    ButtonGroupSeparator
  } from "$lib/components/ui/button-group";
  import { Button } from "$lib/components/ui/button";
</script>
 
<ButtonGroup>
  <Button variant="ghost">Day</Button>
  <ButtonGroupSeparator />
  <Button variant="ghost">Week</Button>
  <ButtonGroupSeparator />
  <Button variant="ghost">Month</Button>
</ButtonGroup>

Installation

npx lily-svelte@latest add button-group

Install the lily base and `utils` (run once per project).

npx lily-svelte@latest init

Copy the button-group source from the registry into `$lib/components/ui/button-group`.

Usage

<script lang="ts">
	import { ButtonGroup, ButtonGroupSeparator } from '$lib/components/ui/button-group';
	import { Button } from '$lib/components/ui/button';
</script>
 
<ButtonGroup>
	<Button variant="ghost">Day</Button>
	<ButtonGroupSeparator />
	<Button variant="ghost">Week</Button>
	<ButtonGroupSeparator />
	<Button variant="ghost">Month</Button>
</ButtonGroup>

← Button Calendar →