Components
Loading 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 { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
function Component() {
return (
<ToggleGroup
variant="outline"
className="inline-flex gap-0 -space-x-px rounded-lg shadow-sm shadow-black/5 rtl:space-x-reverse bg-background"
type="single"
>
<ToggleGroupItem
className="rounded-none shadow-none first:rounded-s-lg last:rounded-e-lg focus-visible:z-10"
value="left"
>
Left
</ToggleGroupItem>
<ToggleGroupItem
className="rounded-none shadow-none first:rounded-s-lg last:rounded-e-lg focus-visible:z-10"
value="center"
>
Center
</ToggleGroupItem>
<ToggleGroupItem
className="rounded-none shadow-none first:rounded-s-lg last:rounded-e-lg focus-visible:z-10"
value="right"
>
Right
</ToggleGroupItem>
</ToggleGroup>
);
}
export { Component };