Toggle

Installation

npx shadcn@latest add @uqudo/toggle

Usage

import { Toggle } from "@/components/uqudo/ui/toggle"

<Toggle aria-label="Toggle italic">
  <ItalicIcon />
</Toggle>

Use defaultPressed for an uncontrolled toggle, or pressed + onPressedChange to control it. Always give an icon-only toggle an aria-label.

Examples

Outline

With text

Icons are sized automatically. Add data-icon="inline-start" or data-icon="inline-end" so the toggle tightens the padding on the side the icon sits on.

Sizes

API Reference

Toggle

toggleVariants

The class-variance-authority recipe behind the component. It is also what Toggle Group uses to style its items, so the two always look alike.

import { toggleVariants } from "@/components/uqudo/ui/toggle"

<button className={toggleVariants({ variant: "outline", size: "sm" })}>
  Bold
</button>

Data attributes