Toggle

A two-state button that can be either on or off.

@react.component
let make = () =>
  <Toggle ariaLabel="Toggle bookmark" size=Toggle.Size.Sm variant=Outline>

Installation

npx shadcn@latest add @rescript-shadcn/Toggle

Usage

<Toggle> {"Toggle"->React.string} </Toggle>

Examples

Outline

Use variant=Outline for an outline style.

@react.component
let make = () =>
  <div className="flex flex-wrap items-center gap-2">

With Text

@react.component
let make = () =>
  <Toggle ariaLabel="Toggle italic">

Size

Use the size prop to change the size of the toggle.

@react.component
let make = () =>
  <div className="flex flex-wrap items-center gap-2">

Disabled

@react.component
let make = () =>
  <div className="flex flex-wrap items-center gap-2">

API Reference

See the Base UI Toggle documentation.