# Button group: Full width

> Give the group a width and each button `flex-1` to split the space evenly.

Example: https://hextaui.com/docs/button-group/examples/full-width
Component docs: https://hextaui.com/docs/button-group.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/button-group-full-width.json
```

This adds `components/examples/button-group/full-width.tsx` with the Button group component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/button-group/full-width.tsx"
import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"

export function ButtonGroupFullWidth() {
  return (
    <ButtonGroup className="w-full max-w-md" aria-label="Range">
      <Button variant="outline" className="flex-1">
        Day
      </Button>
      <Button variant="outline" className="flex-1">
        Week
      </Button>
      <Button variant="outline" className="flex-1">
        Month
      </Button>
    </ButtonGroup>
  )
}
```

## More Button group examples

- [Sizes](https://hextaui.com/docs/button-group/examples/sizes.md)
- [Split button](https://hextaui.com/docs/button-group/examples/split.md)
- [Separators](https://hextaui.com/docs/button-group/examples/player.md)
- [Feedback inside a group](https://hextaui.com/docs/button-group/examples/feedback.md)
- [Vertical](https://hextaui.com/docs/button-group/examples/vertical.md)
- [Nested groups](https://hextaui.com/docs/button-group/examples/nested.md)
- [With text and an input](https://hextaui.com/docs/button-group/examples/input.md)
- [Disabled and invalid](https://hextaui.com/docs/button-group/examples/disabled.md)
- [As a fieldset](https://hextaui.com/docs/button-group/examples/fieldset.md)
- [Right to left](https://hextaui.com/docs/button-group/examples/rtl.md)