export const title = "Badge group components"
export const description = "Free and open-source React badge group components built for modern applications and websites. These badge groups are built using React Aria and styled with Tailwind CSS."
export const links = {
    github: "https://github.com/untitleduico/react/tree/main/components/base/badges",
}

import * as Demos from "@/components/base/badges/badge-groups.demo.tsx";

<PreviewAndCode title="Badge group example">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 overflow-x-auto min-h-[320px] items-center sm:justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.BadgeModernLeadingBrand />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="badge-groups/BadgeModernLeadingBrand" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this badge 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 badge-groups
        ```
    </TabPanel>

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

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

<Divider />

## Badge group examples

Below are examples and variations of this badge group component:

### Pill color leading gray {{ tocOnly:true }}

<PreviewAndCode title="Pill color leading gray">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 overflow-x-auto min-h-[320px] items-center sm:justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.PillColorLeadingGray />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="badge-groups/PillColorLeadingGray" />
    </TabPanel>
</PreviewAndCode>

### Pill color leading brand {{ tocOnly:true }}

<PreviewAndCode title="Pill color leading brand">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 overflow-x-auto min-h-[320px] items-center sm:justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.PillColorLeadingBrand />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="badge-groups/PillColorLeadingBrand" />
    </TabPanel>
</PreviewAndCode>

### Pill color leading error {{ tocOnly:true }}

<PreviewAndCode title="Pill color leading error">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 overflow-x-auto min-h-[320px] items-center sm:justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.PillColorLeadingError />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="badge-groups/PillColorLeadingError" />
    </TabPanel>
</PreviewAndCode>

### Pill color leading warning {{ tocOnly:true }}

<PreviewAndCode title="Pill color leading warning">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 overflow-x-auto min-h-[320px] items-center sm:justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.PillColorLeadingWarning />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="badge-groups/PillColorLeadingWarning" />
    </TabPanel>
</PreviewAndCode>

### Pill color leading success {{ tocOnly:true }}

<PreviewAndCode title="Pill color leading success">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 overflow-x-auto min-h-[320px] items-center sm:justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.PillColorLeadingSuccess />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="badge-groups/PillColorLeadingSuccess" />
    </TabPanel>
</PreviewAndCode>

### Pill color trailing gray {{ tocOnly:true }}

<PreviewAndCode title="Pill color trailing gray">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 overflow-x-auto min-h-[320px] items-center sm:justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.PillColorTrailingGray />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="badge-groups/PillColorTrailingGray" />
    </TabPanel>
</PreviewAndCode>

### Pill color trailing brand {{ tocOnly:true }}

<PreviewAndCode title="Pill color trailing brand">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 overflow-x-auto min-h-[320px] items-center sm:justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.PillColorTrailingBrand />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="badge-groups/PillColorTrailingBrand" />
    </TabPanel>
</PreviewAndCode>

### Pill color trailing error {{ tocOnly:true }}

<PreviewAndCode title="Pill color trailing error">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 overflow-x-auto min-h-[320px] items-center sm:justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.PillColorTrailingError />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="badge-groups/PillColorTrailingError" />
    </TabPanel>
</PreviewAndCode>

### Pill color trailing warning {{ tocOnly:true }}

<PreviewAndCode title="Pill color trailing warning">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 overflow-x-auto min-h-[320px] items-center sm:justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.PillColorTrailingWarning />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="badge-groups/PillColorTrailingWarning" />
    </TabPanel>
</PreviewAndCode>

### Pill color trailing success {{ tocOnly:true }}

<PreviewAndCode title="Pill color trailing success">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 overflow-x-auto min-h-[320px] items-center sm:justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.PillColorTrailingSuccess />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="badge-groups/PillColorTrailingSuccess" />
    </TabPanel>
</PreviewAndCode>

### Modern leading gray {{ tocOnly:true }}

<PreviewAndCode title="Modern leading gray">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 overflow-x-auto min-h-[320px] items-center sm:justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.BadgeModernLeadingGray />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="badge-groups/BadgeModernLeadingGray" />
    </TabPanel>
</PreviewAndCode>

### Modern leading brand {{ tocOnly:true }}

<PreviewAndCode title="Modern leading brand">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 overflow-x-auto min-h-[320px] items-center sm:justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.BadgeModernLeadingBrand />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="badge-groups/BadgeModernLeadingBrand" />
    </TabPanel>
</PreviewAndCode>

### Modern leading error {{ tocOnly:true }}

<PreviewAndCode title="Modern leading error">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 overflow-x-auto min-h-[320px] items-center sm:justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.BadgeModernLeadingError />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="badge-groups/BadgeModernLeadingError" />
    </TabPanel>
</PreviewAndCode>

### Modern leading warning {{ tocOnly:true }}

<PreviewAndCode title="Modern leading warning">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 overflow-x-auto min-h-[320px] items-center sm:justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.BadgeModernLeadingWarning />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="badge-groups/BadgeModernLeadingWarning" />
    </TabPanel>
</PreviewAndCode>

### Modern leading success {{ tocOnly:true }}

<PreviewAndCode title="Modern leading success">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 overflow-x-auto min-h-[320px] items-center sm:justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.BadgeModernLeadingSuccess />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="badge-groups/BadgeModernLeadingSuccess" />
    </TabPanel>
</PreviewAndCode>

### Modern trailing gray {{ tocOnly:true }}

<PreviewAndCode title="Modern trailing gray">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 overflow-x-auto min-h-[320px] items-center sm:justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.BadgeModernTrailingGray />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="badge-groups/BadgeModernTrailingGray" />
    </TabPanel>
</PreviewAndCode>

### Modern trailing brand {{ tocOnly:true }}

<PreviewAndCode title="Modern trailing brand">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 overflow-x-auto min-h-[320px] items-center sm:justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.BadgeModernTrailingBrand />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="badge-groups/BadgeModernTrailingBrand" />
    </TabPanel>
</PreviewAndCode>

### Modern trailing error {{ tocOnly:true }}

<PreviewAndCode title="Modern trailing error">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 overflow-x-auto min-h-[320px] items-center sm:justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.BadgeModernTrailingError />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="badge-groups/BadgeModernTrailingError" />
    </TabPanel>
</PreviewAndCode>

### Modern trailing warning {{ tocOnly:true }}

<PreviewAndCode title="Modern trailing warning">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 overflow-x-auto min-h-[320px] items-center sm:justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.BadgeModernTrailingWarning />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="badge-groups/BadgeModernTrailingWarning" />
    </TabPanel>
</PreviewAndCode>

### Modern trailing success {{ tocOnly:true }}

<PreviewAndCode title="Modern trailing success">
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 overflow-x-auto min-h-[320px] items-center sm:justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.BadgeModernTrailingSuccess />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="badge-groups/BadgeModernTrailingSuccess" />
    </TabPanel>
</PreviewAndCode>