Components / Toggle
Toggle
Single press-state button with aria-pressed. Different from switch (on/off) — use for toolbar buttons like Bold/Italic that have a pressed state.
actions v0.7.0
Playground
Examples
Text formatting
<div style="display:inline-flex;gap:4px;"><cg-toggle pressed><strong>B</strong></cg-toggle><cg-toggle><em>I</em></cg-toggle><cg-toggle><u>U</u></cg-toggle></div>With outline
<cg-toggle variant="outline">Outline</cg-toggle>Import
import { CgToggle } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-toggle';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
pressed | boolean | false | Press state |
variant | "ghost" | "outline" | "solid" | "ghost" | Visual variant |
size | "sm" | "md" | "lg" | "md" | Size |
disabled | boolean | false | Disabled state |
rounded | "none" | "sm" | "md" | "lg" | "full" | "md" | Border radius |
Events
| Event | Detail | Description |
|---|---|---|
cg-toggle-change | {pressed: boolean, value: string} | Press state changed |