> ## Documentation Index
> Fetch the complete documentation index at: https://mds.stepanu.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Button Group

> High-performance, accessible React button group components built for modern applications and websites. These components are built using React Aria and styled with Tailwind CSS.

# Button group components

<div className="flex gap-4">
  <a href="#" className="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-300">GitHub</a>
  <a href="https://react-spectrum.adobe.com/react-aria/" className="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-300">React Aria</a>
</div>

High-performance, accessible React button group components built for modern applications and websites. These components are built using React Aria and styled with Tailwind CSS.

## Example

<Frame className="dark:hidden">
  <iframe src="https://storybook.mavka.agency/iframe.html?globals=theme%3Alight&args=&id=base-components-button-groups--button-groups&viewMode=story" width="100%" height="300px" className="border-none rounded-xl" />
</Frame>

<Frame className="hidden dark:block">
  <iframe src="https://storybook.mavka.agency/iframe.html?globals=theme%3Adark&args=&id=base-components-button-groups--button-groups&viewMode=story" width="100%" height="300px" className="border-none rounded-xl" />
</Frame>

## Installation

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

<CodeGroup>
  ```bash CLI theme={null}
  npx mavka@latest add button-group
  ```

  ```bash Manual theme={null}
  # Manual installation steps
  ```
</CodeGroup>

## Variations

Below are examples and variations of this button group component:

### Leading icon

<Frame className="dark:hidden">
  <iframe src="https://storybook.mavka.agency/iframe.html?globals=theme%3Alight&args=&id=base-components-button-groups--leading-icon&viewMode=story" width="100%" height="200px" className="border-none rounded-xl" />
</Frame>

<Frame className="hidden dark:block">
  <iframe src="https://storybook.mavka.agency/iframe.html?globals=theme%3Adark&args=&id=base-components-button-groups--leading-icon&viewMode=story" width="100%" height="200px" className="border-none rounded-xl" />
</Frame>

### With dot

<Frame className="dark:hidden">
  <iframe src="https://storybook.mavka.agency/iframe.html?globals=theme%3Alight&args=&id=base-components-button-groups--with-dot&viewMode=story" width="100%" height="200px" className="border-none rounded-xl" />
</Frame>

<Frame className="hidden dark:block">
  <iframe src="https://storybook.mavka.agency/iframe.html?globals=theme%3Adark&args=&id=base-components-button-groups--with-dot&viewMode=story" width="100%" height="200px" className="border-none rounded-xl" />
</Frame>

### Disabled

<Frame className="dark:hidden">
  <iframe src="https://storybook.mavka.agency/iframe.html?globals=theme%3Alight&args=&id=base-components-button-groups--disabled&viewMode=story" width="100%" height="200px" className="border-none rounded-xl" />
</Frame>

<Frame className="hidden dark:block">
  <iframe src="https://storybook.mavka.agency/iframe.html?globals=theme%3Adark&args=&id=base-components-button-groups--disabled&viewMode=story" width="100%" height="200px" className="border-none rounded-xl" />
</Frame>

### Disabled individual item

<Frame className="dark:hidden">
  <iframe src="https://storybook.mavka.agency/iframe.html?globals=theme%3Alight&args=&id=base-components-button-groups--disabled-individual-item&viewMode=story" width="100%" height="200px" className="border-none rounded-xl" />
</Frame>

<Frame className="hidden dark:block">
  <iframe src="https://storybook.mavka.agency/iframe.html?globals=theme%3Adark&args=&id=base-components-button-groups--disabled-individual-item&viewMode=story" width="100%" height="200px" className="border-none rounded-xl" />
</Frame>

### Selection

<Frame className="dark:hidden">
  <iframe src="https://storybook.mavka.agency/iframe.html?globals=theme%3Alight&args=&id=base-components-button-groups--selection&viewMode=story" width="100%" height="200px" className="border-none rounded-xl" />
</Frame>

<Frame className="hidden dark:block">
  <iframe src="https://storybook.mavka.agency/iframe.html?globals=theme%3Adark&args=&id=base-components-button-groups--selection&viewMode=story" width="100%" height="200px" className="border-none rounded-xl" />
</Frame>

### Multiple selection

<Frame className="dark:hidden">
  <iframe src="https://storybook.mavka.agency/iframe.html?globals=theme%3Alight&args=&id=base-components-button-groups--multiple-selection&viewMode=story" width="100%" height="200px" className="border-none rounded-xl" />
</Frame>

<Frame className="hidden dark:block">
  <iframe src="https://storybook.mavka.agency/iframe.html?globals=theme%3Adark&args=&id=base-components-button-groups--multiple-selection&viewMode=story" width="100%" height="200px" className="border-none rounded-xl" />
</Frame>