Component reference
Toggle
A formatting option with an observable pressed state.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Width adapts to the available space
"use client";
import { useState } from "react";
import { Toggle, Badge, Button } from "@pimolu/react";
function ControlledToggle() {
const [pressed, setPressed] = useState(true);
return (
<div className="grid gap-5 min-w-0">
<div className="flex flex-wrap items-center gap-3 min-w-0">
<Toggle pressed={pressed} onPressedChange={setPressed}>Bookmark</Toggle>
<Badge variant={pressed ? "success" : "neutral"}>
{pressed ? "saved" : "not saved"}
</Badge>
</div>
<div className="flex flex-wrap items-center gap-3 min-w-0">
<Button
size="sm"
appearance="outline"
onClick={() => setPressed((current) => !current)}
>
Toggle from outside
</Button>
</div>
</div>
);
}
export function DemoExample() {
return (<ControlledToggle />);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Variants
Enumerated from toggleVariantMap. Each row shows the resting and pressed states.
Sizes
Enumerated from toggleVariantMap: sm, md and lg.
Examples
Real compositions built from the same parts.
Usage
Use pressed state for an on/off command, rather than modelling it as navigation.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluToggleProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
pressed | boolean | undefined | — | Controlled pressed state. |
defaultPressed | boolean | undefined | false | Initial pressed state when uncontrolled. |
onPressedChange | ((pressed: boolean) => void) | undefined | — | Called with the next pressed state. |
variant | "outline" | "ghost" | "default" | undefined | "default" | Visual treatment. Defaults to "default". |
size | "sm" | "md" | "lg" | undefined | "md" | Height and font size. Defaults to "md". |
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onClick | MouseEventHandler<HTMLButtonElement> | undefined | — | Standard React/HTML attribute. |
disabled | boolean | undefined | false | Standard React/HTML attribute. |
name | string | undefined | — | Standard React/HTML attribute. |
type | "submit" | "reset" | "button" | undefined | "button" | Standard React/HTML attribute. |
value | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
pressedboolean | undefinedNo default extracted.
Controlled pressed state.
defaultPressedboolean | undefinedDefault: false
Initial pressed state when uncontrolled.
onPressedChange((pressed: boolean) => void) | undefinedNo default extracted.
Called with the next pressed state.
variant"outline" | "ghost" | "default" | undefinedDefault: "default"
Visual treatment. Defaults to "default".
size"sm" | "md" | "lg" | undefinedDefault: "md"
Height and font size. Defaults to "md".
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onClickMouseEventHandler<HTMLButtonElement> | undefinedNo default extracted.
Standard React/HTML attribute.
disabledboolean | undefinedDefault: false
Standard React/HTML attribute.
namestring | undefinedNo default extracted.
Standard React/HTML attribute.
type"submit" | "reset" | "button" | undefinedDefault: "button"
Standard React/HTML attribute.
valuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
Accessibility
- Keep the accessible name stable as aria-pressed changes.