Toggle

Installation

pnpm dlx shadcn@latest add @uitopia/toggle

Usage

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

<Toggle>Toggle</Toggle>

Examples

Outline

With Icon

Small Size

Large Size

Disabled

Icon Group

Comparing with Radix / shadcn

If you’re already familiar with Radix UI and shadcn/ui, this guide highlights the small differences and similarities so you can get started with ui/topia quickly.

Quick Checklist

• If you used asChild on parts, switch to the render prop

Additional Notes

Size Comparison

ui/topia toggle sizes are more compact compared to shadcn/ui, making them better suited for dense applications:

So, for example, if you were using the default size in shadcn/ui and you want to preserve the original height, you should use the lg size in ui/topia.