Toggle

A two-state button that can be either on or off.

Examples

Default

<c-toggle aria-label="Toggle bold">
  <docs-lucide-icon icon="bold" size="16"></docs-lucide-icon>
</c-toggle>

Outline

<c-toggle variant="outline" aria-label="Toggle italic">
  <docs-lucide-icon icon="italic" size="16"></docs-lucide-icon>
</c-toggle>

With Text

Italic 
<c-toggle aria-label="Toggle italic">
  <docs-lucide-icon icon="italic" size="16"></docs-lucide-icon>
  Italic
</c-toggle>

Small

<c-toggle size="sm" aria-label="Toggle italic">
  <docs-lucide-icon icon="italic" size="14"></docs-lucide-icon>
</c-toggle>

Large

<c-toggle size="lg" aria-label="Toggle italic">
  <docs-lucide-icon icon="italic" size="18"></docs-lucide-icon>
</c-toggle>

Disabled

<c-toggle disabled aria-label="Toggle underline">
  <docs-lucide-icon icon="underline" size="16"></docs-lucide-icon>
</c-toggle>

API Reference

Toggle

A two-state button that can be toggled on or off.

Prop Type Default Description
pressed boolean false Whether the toggle is pressed
disabled boolean false Whether the toggle is disabled
variant 'default' | 'outline' 'default' The visual style variant of the toggle
size 'default' | 'sm' | 'lg' 'default' The size of the toggle
aria-label string - Accessible label for the toggle
toggle-classes string - Additional CSS classes to apply to the toggle

Events

pressedchange

Fired when the toggle state changes.

Detail:

  • pressed (boolean) - The new pressed state
toggle.addEventListener('pressedchange', (event) => {
  console.log('Pressed:', event.detail.pressed);
});