# Toggle
{" Bookmark "}
```astro --- --- Bookmark ``` ## Installation ```bash bunx bejamas add toggle ``` ```bash npx bejamas add toggle ``` ```bash pnpm dlx bejamas add toggle ``` ```bash yarn dlx bejamas add toggle ``` ## Usage ```astro nocollapse --- --- ``` ## Props | Prop | Type | Default | |---|---|---| | defaultPressed | `boolean` | | | disabled | `boolean` | | | class | `string` | `""` | ## Examples ### Outline
{" Bold "} {" Italic "}
```astro --- ---
Bold Italic
``` ### With Text
{" Italic "}
```astro --- --- Italic ``` ### Sizes
{" Small "} {" Default "} {" Large "}
```astro --- ---
Small Default Large
``` ### Disabled
{" Disabled "} {" Disabled "}
```astro --- ---
Disabled Disabled
``` ## API Reference ### Events | Event | Detail | Description | |-------|--------|-------------| | `toggle:change` | `{ pressed: boolean }` | Fired when the toggle state changes | ### Programmatic Control ```js nocollapse // 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 |