Components
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- Dialog
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Label
- Menu
- Meter
- Number Field
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Slider
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Toolbar
- Tooltip
Resources
Toggle
A two-state button that can be on or off.
import { Toggle } from "@/components/ui/toggle"
export function ToggleDemo() {
return <Toggle>Toggle</Toggle>
}
Installation
pnpm dlx shadcn@latest add https://coss.com/ui/r/toggle.json
Usage
import { Toggle } from "@/components/ui/toggle"<Toggle>Toggle</Toggle>Examples
Outline
import { Toggle } from "@/components/ui/toggle"
export function ToggleOutline() {
return <Toggle variant="outline">Outline Toggle</Toggle>
}
With Icon
import { BoldIcon } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"
export function ToggleWithIcon() {
return (
<Toggle variant="outline" aria-label="Toggle bold">
<BoldIcon />
</Toggle>
)
}
Small Size
import { Toggle } from "@/components/ui/toggle"
export function ToggleSm() {
return (
<Toggle variant="outline" size="sm">
Small
</Toggle>
)
}
Large Size
import { Toggle } from "@/components/ui/toggle"
export function ToggleLg() {
return (
<Toggle variant="outline" size="lg">
Large
</Toggle>
)
}
Disabled
import { Toggle } from "@/components/ui/toggle"
export function ToggleDisabled() {
return (
<Toggle variant="outline" disabled>
Disabled
</Toggle>
)
}
Icon Group
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"
export function ToggleIconGroup() {
return (
<div className="flex items-center gap-1">
<Toggle variant="outline" aria-label="Toggle bold">
<BoldIcon />
</Toggle>
<Toggle variant="outline" aria-label="Toggle italic">
<ItalicIcon />
</Toggle>
<Toggle variant="outline" aria-label="Toggle underline">
<UnderlineIcon />
</Toggle>
</div>
)
}
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 coss.com ui quickly.
Quick Checklist
- If you used
asChildon parts, switch to therenderprop
Additional Notes
Size Comparison
coss.com ui toggle sizes are more compact compared to shadcn/ui, making them better suited for dense applications:
| Size | Height (shadcn/ui) | Height (coss.com ui) |
|---|---|---|
sm | 32px | 28px |
default | 36px | 32px |
lg | - | 36px |
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 coss.com ui.