Toggle

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

1
---
2
import { BookmarkIcon } from '@lucide/astro';
3

4
import { Toggle } from '@bejamas/ui/components/toggle';
5
---
6

7
<Toggle aria-label="Toggle bookmark" size="sm" variant="outline">
8
  <BookmarkIcon />
9
  Bookmark
10
</Toggle>

Installation

bunx bejamas add toggle

npx bejamas add toggle

pnpm dlx bejamas add toggle

yarn dlx bejamas add toggle

Usage

1
---
2
import { Toggle } from '@bejamas/ui/components/toggle';
3
import { BoldIcon } from '@lucide/astro';
4
---
5

6
<Toggle aria-label="Toggle bold">
7
  <BoldIcon />
8
</Toggle>

Examples

Outline

1
---
2
import { BoldIcon, ItalicIcon } from '@lucide/astro';
3

4
import { Toggle } from '@bejamas/ui/components/toggle';
5
---
6

7
<div class="flex items-center gap-2">
8
  <Toggle variant="outline" aria-label="Toggle bold">
9
    <BoldIcon />
10
    Bold
11
  </Toggle>
12
  <Toggle variant="outline" aria-label="Toggle italic">
13
    <ItalicIcon />
14
    Italic
15
  </Toggle>
16
</div>

With Text

1
---
2
import { ItalicIcon } from '@lucide/astro';
3

4
import { Toggle } from '@bejamas/ui/components/toggle';
5
---
6

7
<Toggle variant="outline" aria-label="Toggle italic">
8
  <ItalicIcon />
9
  Italic
10
</Toggle>

Sizes

1
---
2
import { Toggle } from '@bejamas/ui/components/toggle';
3
---
4

5
<div class="flex items-center gap-2">
6
  <Toggle size="sm" variant="outline" aria-label="Toggle small">
7
    Small
8
  </Toggle>
9
  <Toggle size="default" variant="outline" aria-label="Toggle default">
10
    Default
11
  </Toggle>
12
  <Toggle size="lg" variant="outline" aria-label="Toggle large">
13
    Large
14
  </Toggle>
15
</div>

Disabled

1
---
2
import { Toggle } from '@bejamas/ui/components/toggle';
3
---
4

5
<div class="flex items-center gap-2">
6
  <Toggle disabled aria-label="Toggle bold">
7
    Disabled
8
  </Toggle>
9
  <Toggle disabled variant="outline" aria-label="Toggle italic">
10
    Disabled
11
  </Toggle>
12
</div>

API Reference

Events

Event	Detail	Description
`toggle:change`	`{ pressed: boolean }`	Fired when the toggle state changes

Programmatic Control

// Set toggle state programmatically
element.dispatchEvent(new CustomEvent('toggle:set', { detail: { value: true } }));

Data Attributes

Attribute	Element	Description
`data-state`	toggle	Current state: `on` or `off`
`data-disabled`	toggle	Present when toggle is disabled