Toggle

A component for switching between two states, suchjson as on/off.

<script>
  import {Toggle} from 'ui-ingredients';
  import {BellIcon, BellOffIcon} from '$lib/icons';

  let pressed = $state(false);
</script>

<Toggle.Root
  {pressed}
  onPressedChange={(detail) => {
    pressed = detail.pressed;
  }}
>
  {#if pressed}
    <BellOffIcon />
  {:else}
    <BellIcon />
  {/if}
</Toggle.Root>

API Reference

Root

Prop	Default	Description
`onPressedChange`		`(pressed: boolean) => void` Function to call when the toggle is clicked.
`pressed`		`boolean` Whether the toggle is pressed or not.

Data Attribute	Value
`data-part`	root
`data-pressed`	Present when the toggle is pressed
`data-scope`	toggle
`data-state`	"off" \| "on"

Indicator

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-part`	indicator
`data-pressed`	Present when the toggle is pressed
`data-scope`	toggle
`data-state`	"off" \| "on"