Buttons

Toggle

Server Component

A two-state on/off button.

Import

tsx

import { Toggle } from "@cronus-ui/ui";

bash

npx cronus-ui add toggle

Examples

Default

A two-state button. Control it with `pressed` and `onPressedChange`.

tsx

const [bold, setBold] = useState(false);

return (
  <Toggle pressed={bold} onPressedChange={setBold} aria-label="Toggle bold">
    <Bold />
    Bold
  </Toggle>
);

Outline variant

The outline variant keeps a visible border in both states.

tsx

const [italic, setItalic] = useState(false);

return (
  <Toggle
    variant="outline"
    pressed={italic}
    onPressedChange={setItalic}
    aria-label="Toggle italic"
  >
    <Italic />
    Italic
  </Toggle>
);

Sizes

Toggles come in three sizes to match surrounding controls.

tsx

const [pressed, setPressed] = useState(true);

return (
  <div className="flex items-center gap-3">
    <Toggle size="sm" pressed={pressed} onPressedChange={setPressed} aria-label="Bold (small)">
      <Bold />
    </Toggle>
    <Toggle size="md" pressed={pressed} onPressedChange={setPressed} aria-label="Bold (medium)">
      <Bold />
    </Toggle>
    <Toggle size="lg" pressed={pressed} onPressedChange={setPressed} aria-label="Bold (large)">
      <Bold />
    </Toggle>
  </div>
);

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 2/2Pixel diff 0 pxLogic 1/1Parity scoreboard

off.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component ToggleOff layout:inline style:toggle {
  label "Bold"
}

page "/audit/toggle/off" type:custom {
  use ToggleOff
}

on.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component ToggleOn layout:inline style:toggle {
  pressed:true
  label "Bold"
}

page "/audit/toggle/on" type:custom {
  use ToggleOn
}

API Reference

Generated from the component's exported types.

ToggleProps

Extends ComponentPropsWithoutRef<typeof TogglePrimitive.Root>, VariantProps<typeof toggleVariants>

Prop	Type	Default	Description
`variant`	`"default" \| "outline"`	`"default"`	One of "default" \| "outline".
`size`	`"sm" \| "md" \| "lg"`	`"md"`	One of "sm" \| "md" \| "lg".
`pressed`	`boolean`	—	Controlled pressed state.
`defaultPressed`	`boolean`	—	Uncontrolled initial pressed state.
`onPressedChange`	`(pressed: boolean) => void`	—	—
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.