104Get started
HextaUI

Button group: Disabled and invalid

Disable or mark a single segment with aria-invalid. An invalid segment rises above its neighbours so its red ring is never covered.

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"

export function ButtonGroupDisabled() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <ButtonGroup aria-label="Post actions">
        <Button variant="outline">Edit</Button>
        <Button variant="outline" disabled>
          Publish
        </Button>
        <Button variant="outline">Share</Button>
      </ButtonGroup>
      <ButtonGroup aria-label="Date range">
        <Button variant="outline">Start</Button>
        <Button variant="outline" aria-invalid>
          Missing date
        </Button>
        <Button variant="outline">End</Button>
      </ButtonGroup>
    </div>
  )
}

Add this example

This adds the example as components/examples/button-group/disabled.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-disabled.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