uix-uiToggle
Pressable on/off button + group. 2 variants × 2 values × 2 sizes.
import * as React from "react";
import { Star } from "@/components/ui/icons";
import { Toggle } from "@/components/ui/toggle";
export default function Example() {
const [fav, setFav] = React.useState(false);
return <Toggle variant="outline" pressed={fav} onPressedChange={setFav} icon={<Star />}>{fav ? "Saved" : "Save"}</Toggle>;
}
Installation
$ npx uix-ui@latest add toggleThis copies the file into components/ui/toggle.tsx in your project. npx shadcn@latest add @uix/toggle works too.
Usage
import { Toggle, ToggleGroup } from "@/components/ui/toggle";
<ToggleGroup attached aria-label="Text style">
<Toggle variant="outline" defaultPressed>Hot</Toggle>
<Toggle variant="outline">Iced</Toggle>
<Toggle variant="outline">Cold brew</Toggle>
</ToggleGroup>
Examples
Toggle group
import { Toggle, ToggleGroup } from "@/components/ui/toggle";
export default function Example() {
return (
<ToggleGroup attached aria-label="Text style">
<Toggle variant="outline" defaultPressed>Hot</Toggle>
<Toggle variant="outline">Iced</Toggle>
<Toggle variant="outline">Cold brew</Toggle>
</ToggleGroup>
);
}
Props
Toggle props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | default | outline | "default" | |
pressed | false | true | – | |
size | sm | md | "md" | |
defaultPressed | boolean | false | Start pressed (uncontrolled). Pass the variant prop "pressed" to control it. |
onPressedChange | (pressed: boolean) => void | – | |
icon | React.ReactNode | – | Icon before the label. |
ToggleGroupProps
| Prop | Type | Default | Description |
|---|---|---|---|
attached | boolean | false | Joins the toggles into one bar that shares a hairline (use the outline variant). |
Everything else is passed to the root element, so className, aria-* and event handlers work as usual.
Dependencies
Installed for you by the CLI.
class-variance-authorityclsxtailwind-merge
lib/utils.ts
This file exports 2 parts: Toggle, ToggleGroup. Use only the ones you need.