Components
Starting preview...
A set of two-state buttons that can be toggled on or off.
npx shadcn@latest add https://21st.dev/r/shadcn/toggle-groupimport { Bold, Italic, Underline } from "lucide-react"
import {
ToggleGroup,
ToggleGroupItem,
} from "@/components/ui/shadcn/toggle-group"
function ToggleGroupDemo() {
return (
<ToggleGroup type="multiple">
<ToggleGroupItem value="bold" aria-label="Toggle bold">
<Bold className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="italic" aria-label="Toggle italic">
<Italic className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="underline" aria-label="Toggle underline">
<Underline className="h-4 w-4" />
</ToggleGroupItem>
</ToggleGroup>
)
}
function ToggleGroupOutline() {
return (
<ToggleGroup variant="outline" type="multiple">
<ToggleGroupItem value="bold" aria-label="Toggle bold">
<Bold className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="italic" aria-label="Toggle italic">
<Italic className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="underline" aria-label="Toggle underline">
<Underline className="h-4 w-4" />
</ToggleGroupItem>
</ToggleGroup>
)
}
function ToggleGroupSingle() {
return (
<ToggleGroup type="single">
<ToggleGroupItem value="bold" aria-label="Toggle bold">
<Bold className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="italic" aria-label="Toggle italic">
<Italic className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="underline" aria-label="Toggle underline">
<Underline className="h-4 w-4" />
</ToggleGroupItem>
</ToggleGroup>
)
}
function ToggleGroupSmall() {
return (
<ToggleGroup size={"sm"} type="multiple">
<ToggleGroupItem value="bold" aria-label="Toggle bold">
<Bold className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="italic" aria-label="Toggle italic">
<Italic className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="underline" aria-label="Toggle underline">
<Underline className="h-4 w-4" />
</ToggleGroupItem>
</ToggleGroup>
)
}
function ToggleGroupLarge() {
return (
<ToggleGroup size={"lg"} type="multiple">
<ToggleGroupItem value="bold" aria-label="Toggle bold">
<Bold className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="italic" aria-label="Toggle italic">
<Italic className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="underline" aria-label="Toggle underline">
<Underline className="h-4 w-4" />
</ToggleGroupItem>
</ToggleGroup>
)
}
function ToggleGroupDisabled() {
return (
<ToggleGroup disabled type="single">
<ToggleGroupItem value="bold" aria-label="Toggle bold">
<Bold className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="italic" aria-label="Toggle italic">
<Italic className="h-4 w-4" />
</ToggleGroupItem>
<ToggleGroupItem value="underline" aria-label="Toggle underline">
<Underline className="h-4 w-4" />
</ToggleGroupItem>
</ToggleGroup>
)
}
export default {
ToggleGroupDemo,
ToggleGroupOutline,
ToggleGroupSingle,
ToggleGroupSmall,
ToggleGroupLarge,
ToggleGroupDisabled,
}