Toggle
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { Toggle } from "@corew500/ui/toggle"
<Toggle>Content</Toggle>Variants
toggleVariants
| Axis | Values | Default |
|---|---|---|
| variant | defaultoutline | default |
| size | defaultsmlg | default |
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | enum | default | Visual style variant. - `default`: Transparent background with muted fill when pressed - `outline`: Bordered variant with subtle shadow |
| size | enum | default | Size variant affecting height and padding. - `sm`: Compact 8px height - `default`: Standard 9px height - `lg`: Large 10px height |
| pressed | enum | — | Whether the toggle button is currently pressed. This is the controlled counterpart of `defaultPressed`. |
| defaultPressed | enum | false | Whether the toggle button is currently pressed. This is the uncontrolled counterpart of `pressed`. |
| disabled | enum | false | Whether the component should ignore user interaction. |
| onPressedChange | (pressed: boolean, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element; }) => void | — | Callback fired when the pressed state is changed. |
| value | string | — | A unique string that identifies the toggle when used inside a toggle group. |
| nativeButton | enum | true | Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (e.g. `<div>`). |
| style | enum | — | Style applied to the element, or a function that returns a style object based on the component’s state. |
| className | enum | — | CSS class applied to the element, or a function that returns a class based on the component’s state. |
| render | enum | — | Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
Accessibility
Keyboard Navigation
- Keyboard accessible: Space or Enter to toggle state
- Focus visible ring for keyboard navigation
Screen Readers
- - Uses `role="button"` with `aria-pressed` state (handled by Base UI)
- `aria-pressed="true"` when active, `aria-pressed="false"` when inactive
- For icon-only toggles, provide `aria-label` describing the action
- Screen readers announce current pressed state and label
Additional
- Disabled state prevents interaction and reduces opacity
Localization
Translatable Content
- - Pass translated text as children for text toggles
- Provide translated `aria-label` for icon-only toggles
Locale-Specific Formatting
- Example: `aria-label={t('toolbar.bold')}` for a bold formatting toggle