Components / Actions Toggle A button that stays pressed, such as Bold in an editor. ToggleGroup joins several, with one or many pressed and arrow-key navigation.
Preview Compare skins Code
minimal · light · #3fa34d Set up Camaleo once (Installation ), then import what you need.
import { Toggle , ToggleGroup } from "@camaleo/react" ;A Toggle is one button with aria-pressed. A ToggleGroup wraps several and moves focus between them with the arrow keys.
B I U
Preview Code
minimal · light · #3fa34d
With a label Code An icon and a short label. The label names the setting, not the state.
Notifications are on.
Controlled Code Click it. pressed and onPressedChange let the rest of the screen react to the state.
One of many Code A ToggleGroup lets only one stay pressed, like text alignment. Arrow keys move between the options.
Many of many Code With multiple, any number can be pressed — bold, italic and underline at once.
Icon only, with a tooltip Code The aria-label is the tooltip text, so screen readers hear the same name sighted users see on hover.
Disabled Code Keeps its pressed state visible, so people still see what is on.
Release notes
Bold and alignment stay pressed while the cursor is in formatted text.
Editor toolbar ToggleGroup · Toggle · Separator Code
View switcher ToggleGroup · Card Code
Favorite Toggle · Card Code
Do Keep the label the same. The pressed look carries the state; screen readers announce it from aria-pressed.
Don’t A toggle for a one-off action. "Send" happens once. Use a Button.
Do Group related options. A ToggleGroup gives them one tab stop and arrow-key navigation.
Don’t Loose toggles that should be exclusive. Two alignments pressed at once is a state that makes no sense.
Prop Type Default Description
pressed boolean — Whether the toggle button is currently pressed.
This is the controlled counterpart of defaultPressed.
defaultPressed boolean false Whether the toggle button is currently pressed.
This is the uncontrolled counterpart of pressed.
disabled boolean false Whether the component should ignore user interaction.
onPressedChange function — Callback fired when the pressed state is changed.
value string — A unique string that identifies the toggle when used
inside a toggle group.
render ReactElement | (props, state) => ReactElement — 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.
ToggleGroup takes value, defaultValue and onValueChange (arrays of the toggles' value), multiple and orientation.
Attributes data-slot "toggle" · "toggle-group"
data-pressed present while pressed
data-disabled present when disabled
aria-pressed "true" · "false"
Tokens it reads Color
--cml-border --cml-button-disabled-shadow --cml-button-outline-bg --cml-button-outline-border --cml-button-outline-shadow --cml-fg --cml-fg-secondary --cml-focus-offset --cml-focus-ring --cml-focus-width --cml-shadow-control-active --cml-surface --cml-surface-raised
Shape & size
--cml-border-width --cml-control-height --cml-control-padding --cml-gap --cml-radius-control --cml-radius-control-sm
Type & motion
--cml-duration-fast --cml-ease-standard --cml-font-control --cml-font-size-control --cml-font-size-control-sm --cml-font-weight-control --cml-letter-spacing-control --cml-press-translate --cml-text-transform-control
This component only
--cml-disabled-opacity --cml-toggle-pressed-bg --cml-toggle-pressed-fg --cml-toggle-pressed-shadow
Space Presses or releases the toggle.
Enter Presses or releases the toggle.
Arrow keys In a ToggleGroup, move focus to the previous or next toggle.
Home / End In a ToggleGroup, move focus to the first or last toggle.
Icon-only toggles need an aria-label; the state comes from aria-pressed, so the label never changes. Give every ToggleGroup an aria-label that names the setting ("Alignment"). The pressed look passes 3:1 against the unpressed one in every skin. ← Previous Button Next → Spinner