Components
Loading preview...
This is a button group component
npx shadcn@latest add https://21st.dev/r/lyanchouss/the-button-groupimport { Grid2x2, List, MoreHorizontal, Table2 } from "lucide-react";
import { ButtonGroup } from "@/components/ui/button-group";
import { Button } from "@/components/ui/button";
export function ButtonGroupPreview() {
return (
<div className="mx-auto flex w-full max-w-2xl flex-col gap-10 px-2">
<div className="space-y-3">
<div className="space-y-1 text-left">
<p className="font-medium text-foreground text-sm">
Divided compact row
</p>
<p className="text-muted-foreground text-sm">
Use this when each adjacent action still benefits from a visible
split.
</p>
</div>
<div className="flex flex-wrap items-center gap-2">
<ButtonGroup>
<Button variant="outline" size="sm" className="text-muted-foreground">
<List className="size-4" />
List
</Button>
<Button variant="outline" size="sm" className="text-muted-foreground">
<Grid2x2 className="size-4" />
Board
</Button>
<Button variant="outline" size="sm" className="text-muted-foreground">
<Table2 className="size-4" />
Table
</Button>
</ButtonGroup>
<Button variant="outline" size="icon" className="text-muted-foreground" aria-label="More options">
<MoreHorizontal className="size-4" />
</Button>
</div>
</div>
<div className="space-y-3">
<div className="space-y-1 text-left">
<p className="font-medium text-foreground text-sm">
Quiet toolbar row
</p>
<p className="text-muted-foreground text-sm">
Use this when you want a softer grouped control with less visual
chrome.
</p>
</div>
<div className="flex flex-wrap items-center gap-2">
<ButtonGroup>
<Button variant="ghost" size="sm" className="text-muted-foreground">
<List className="size-4" />
List
</Button>
<Button variant="ghost" size="sm" className="text-muted-foreground">
<Grid2x2 className="size-4" />
Board
</Button>
<Button variant="ghost" size="sm" className="text-muted-foreground">
<Table2 className="size-4" />
Table
</Button>
</ButtonGroup>
<Button variant="ghost" size="icon" className="text-muted-foreground" aria-label="More options">
<MoreHorizontal className="size-4" />
</Button>
</div>
</div>
</div>
);
}
export default ButtonGroupPreview;