Toggle

<Toggle aria-label="Toggle bold">  <TextB /></Toggle>

Usage

import { Toggle } from "@reva/ui";

Reva exposes three variants — solid, subtle (default), and outline — matching the Park UI recipe shape, and a size ramp aligned with Button: xs, sm, default, lg. There is no icon-* size; toggles are square by default and grow to fit text or icon + label.

Examples

With label

<Toggle aria-label="Toggle italic">  <TextItalic data-icon="inline-start" />  Italic</Toggle>

Variants

<HStack gap={2}>  <Toggle variant="solid" aria-label="Solid toggle">    <TextB />  </Toggle>  <Toggle variant="subtle" aria-label="Subtle toggle">    <TextItalic />  </Toggle>  <Toggle variant="outline" aria-label="Outline toggle">    <TextUnderline />  </Toggle></HStack>

Sizes

<HStack align="center" gap={2}>  <Toggle size="xs" aria-label="xs">    <TextB />  </Toggle>  <Toggle size="sm" aria-label="sm">    <TextB />  </Toggle>  <Toggle size="default" aria-label="default">    <TextB />  </Toggle>  <Toggle size="lg" aria-label="lg">    <TextB />  </Toggle></HStack>

<HStack gap={1}>  <Toggle variant="outline" aria-label="Align left" defaultPressed>    <TextAlignLeft />  </Toggle>  <Toggle variant="outline" aria-label="Align center">    <TextAlignCenter />  </Toggle>  <Toggle variant="outline" aria-label="Align right">    <TextAlignRight />  </Toggle></HStack>

Disabled

<Toggle disabled aria-label="Disabled toggle">  <TextB /></Toggle>

Props

Toggle forwards props to Radix Toggle (TogglePrimitive.Root). See the Radix UI Toggle documentation for pressed, defaultPressed, onPressedChange, and disabled.

Prop	Type	Default	Description
`variant`	`"solid" \| "subtle" \| "outline"`	`"subtle"`	Visual style.
`size`	`"xs" \| "sm" \| "default" \| "lg"`	`"default"`	Control size — aligned with Button.
`pressed` / `defaultPressed`	`boolean`	—	Controlled vs uncontrolled pressed state.
`onPressedChange`	`(pressed: boolean) => void`	—	Fires when the pressed state changes.
`disabled`	`boolean`	`false`	Disables the control.

Toggle

On this page