Skip to content
aq-ui
Back to ComponentsComponent

Button Group

Open-code aq-ui accessible component family for Button Group.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

Loading interactive preview…

Installation

pnpm dlx aq-ui@alpha add button-group

API reference

SSR-safe

Import the parts you need, then jump to an export for its contract.

View full source

Quick start

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

<ButtonGroup />

ButtonGroup

constSource L26

Open-code aq-ui accessible component family for Button Group.

const ButtonGroup = React.forwardRef<React.ComponentRef<"div">, React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>>(…)
Props type
React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>
<ButtonGroup />

ButtonGroupSeparator

constSource L67

Public const export from Button Group.

const ButtonGroupSeparator = React.forwardRef<React.ComponentRef<typeof Separator>, React.ComponentProps<typeof Separator>>(…)
Props type
React.ComponentProps<typeof Separator>
<ButtonGroupSeparator />

ButtonGroupText

constSource L43

Public const export from Button Group.

const ButtonGroupText = React.forwardRef<React.ComponentRef<"div">, useRender.ComponentProps<"div">>(…)
Props type
useRender.ComponentProps<"div">
<ButtonGroupText />

buttonGroupVariants

constSource L9

Public const export from Button Group.

const buttonGroupVariants = cva(…)

Registry dependencies

separator, utils

Package dependencies

@base-ui/react@^1.7.0, class-variance-authority@^0.7.1

Files

  • components/ui/button-group.tsx

Source