Button Group

npx shadcn@latest add https://ui.saasflare.io/r/button-group.json

pnpm add @saasflare/ui

"use client"import { Button, ButtonGroup } from "@saasflare/ui"/** Buttons joined into a single connected strip. */export function Demo() {    return (        <ButtonGroup>            <Button variant="outline">Day</Button>            <Button variant="outline">Week</Button>            <Button variant="outline">Month</Button>        </ButtonGroup>    )}

"use client"import { Button, ButtonGroup } from "@saasflare/ui"/** Horizontal and vertical orientations share rounded corners and borders. */export function Demo() {    return (        <div className="flex flex-wrap items-start gap-8">            <ButtonGroup orientation="horizontal">                <Button variant="outline">Overview</Button>                <Button variant="outline">Usage</Button>                <Button variant="outline">Billing</Button>            </ButtonGroup>            <ButtonGroup orientation="vertical">                <Button variant="outline">Profile</Button>                <Button variant="outline">Team</Button>                <Button variant="outline">API keys</Button>            </ButtonGroup>        </div>    )}

"use client"import {    Button,    ButtonGroup,    ButtonGroupSeparator,    ButtonGroupText,} from "@saasflare/ui"/** Static text label and a separator joined to interactive buttons. */export function Demo() {    return (        <ButtonGroup>            <ButtonGroupText>app.saasflare.io/</ButtonGroupText>            <Button variant="outline">acme</Button>            <ButtonGroupSeparator />            <Button variant="outline">Copy</Button>        </ButtonGroup>    )}