104Get started
HextaUI

Button group: Full width

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

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>
  )
}

Add this example

This adds the example as components/examples/button-group/full-width.tsx, together with the Button group component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/button-group-full-width.json

To add only the component, follow the Button group installation.

More Button group examples

See them all, with keyboard support and accessibility notes, on the Button group page.

Related components