Toggle

Use defaultPressed for uncontrolled state or pressed with onPressedChange for controlled state.

import { Toggle } from '@manti-ui/react';

export default function ToggleBasic() {
  return (
    <Toggle variant="primary" defaultPressed={false}>
      Spicy
    </Toggle>
  );
}

Controlled state

API

Prop	Type	Default	Description
`variant`	`MantiVariant`	`'primary'`	Active variant when the toggle is pressed.
`pressed`	`boolean`	—	Controlled pressed state.
`defaultPressed`	`boolean`	—	Initial pressed state for uncontrolled usage.
`onPressedChange`	`(pressed: boolean) => void`	—	Called whenever the pressed state changes.
`disabled`	`boolean`	—	Disable the control.
`iconOnly`	`boolean`	—	Render as a square, icon-only toggle. Provide an aria-label.
`children`	`ReactNode \| ((pressed: boolean) => ReactNode)`	—	Content, or a render function receiving the current pressed state.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="toggle"][data-part="root"]`	The pressable button. Off reads as a quiet outline; on fills with the variant.

Tokens

Token	Controls
`--manti-toggle-size`	size

Last updated 13 September 2026