export const title = "Button group components"
export const description = "Free and open-source React button group components built for modern applications and websites. These button groups are built using React Aria and styled with Tailwind CSS."
export const links = {
    github: "https://github.com/untitleduico/react/tree/main/components/base/button-group",
    rac: "https://react-spectrum.adobe.com/react-aria/ToggleButtonGroup.html"
}

import * as Demos from "@/components/base/button-group/button-group.demo.tsx";

<PreviewAndCode title="Button group example">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.Default />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="button-group/Default" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this button group component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add button-group
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="base/button-group" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the button group components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Button group examples

Below are examples and variations of this button group component:

### Leading icon {{ tocOnly:true }}

<PreviewAndCode title="Leading icon">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.LeadingIcon />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="button-group/LeadingIcon" />
    </TabPanel>
</PreviewAndCode>

### With dot {{ tocOnly:true }}

<PreviewAndCode title="With dot">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ButtonGroupDot />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="button-group/ButtonGroupDot" />
    </TabPanel>
</PreviewAndCode>

### Disabled {{ tocOnly:true }}

<PreviewAndCode title="Disabled">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.DisabledAll />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="button-group/DisabledAll" />
    </TabPanel>
</PreviewAndCode>

### Disabled individual item {{ tocOnly:true }}

<PreviewAndCode title="Disabled individual item">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.DisabledIndividualButton />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="button-group/DisabledIndividualButton" />
    </TabPanel>
</PreviewAndCode>

### Selection {{ tocOnly:true }}

<PreviewAndCode title="Selection">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.SelectedItem />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="button-group/SelectedItem" />
    </TabPanel>
</PreviewAndCode>

### Multiple selection {{ tocOnly:true }}

<PreviewAndCode title="Multiple selection">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.MultipleSelectedItems />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="button-group/MultipleSelectedItems" />
    </TabPanel>
</PreviewAndCode>