Button Group

import {ButtonGroup} from "@qualcomm-ui/react/button"

Usage

Use the ButtonGroup component to group related buttons together. This helps to visually associate buttons that perform similar actions.

Examples

Shared Props

When you set certain props on the ButtonGroup, they are automatically applied to all child buttons. Some of these props can be overridden at the button level, while others cannot:

Non-overridable:

density, disabled, and size: if set on the group, all buttons will have the same corresponding property. The same prop on individual buttons will be ignored.

Overridable:

emphasis and variant: If set on the group, these will be the default for all buttons, but individual buttons can override them as needed.

Brand

<ButtonGroup disabled size="sm">
  <Button startIcon={AArrowDown} variant="ghost">
    Button
  </Button>
  <Button startIcon={AArrowDown} variant="outline">
    Button
  </Button>
  <Button emphasis="primary" startIcon={AArrowDown} variant="fill">
    Button
  </Button>
</ButtonGroup>
<ButtonGroup variant="outline">
  <Button startIcon={AArrowDown}>Button</Button>
  <Button startIcon={AArrowDown}>Button</Button>
  <Button emphasis="primary" startIcon={AArrowDown}>
    Button
  </Button>
</ButtonGroup>

Layout

Use the layout prop to control how the button group is sized and aligned within its container. Options include:

hug: Content-sized; width matches the buttons only (default).
start: Full width; buttons are aligned to the start edge.
end: Full width; buttons are aligned to the end edge.
fill: Full width; buttons share space evenly.

Borders have been added to the example below to better illustrate these layout options.

Brand

{(["hug", "start", "end", "fill"] satisfies QdsButtonGroupLayout[]).map(
  (layout) => (
    <ButtonGroup
      key={layout}
      className="border-brand-primary border-1 border-dashed p-1.5"
      layout={layout}
    >
      <Button startIcon={AArrowDown} variant="ghost">
        Button
      </Button>
      <Button startIcon={AArrowDown} variant="outline">
        Button
      </Button>
      <Button emphasis="primary" startIcon={AArrowDown} variant="fill">
        Button
      </Button>
    </ButtonGroup>
  ),
)}

Accessibility

You should provide a meaningful label for the button group using either the aria-label or aria-labelledby prop.

Prop	Type	Default
density The density of the button. Governs padding and height.	\| 'default' \| 'compact'	'default'
disabled Disables all buttons within the group.	boolean	false
emphasis The emphasis of the buttons in the group.	\| 'neutral' \| 'primary' \| 'danger' \| 'white-persistent' \| 'black-persistent'
layout The layout used to display the button group. - `hug`: Content-sized; width matches the buttons only (default). - `start`: Full width; buttons are aligned to the start edge. - `end`: Full width; buttons are aligned to the end edge. - `fill`: Full width; buttons share space evenly.	\| 'hug' \| 'start' \| 'end' \| 'fill'	'hug'
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)
size The size of the buttons in the group.	\| 'sm' \| 'md' \| 'lg'	'md'
variant The variant of the buttons in the group.	\| 'fill' \| 'ghost' \| 'outline'

The layout used to display the button group.
- hug: Content-sized; width matches the buttons only (default).
- start: Full width; buttons are aligned to the start edge.
- end: Full width; buttons are aligned to the end edge.
- fill: Full width; buttons share space evenly.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

size

Type

| 'sm'
| 'md'
| 'lg'

Description

The size of the buttons in the group.

variant

Type

| 'fill'
| 'ghost'
| 'outline'

Description

The variant of the buttons in the group.

Attribute / Property	Value
`className`	'qui-button-group'
`data-disabled`
`data-emphasis`	\| 'neutral' \| 'primary' \| 'danger' \| 'white-persistent' \| 'black-persistent'
`data-layout`	\| 'hug' \| 'start' \| 'end' \| 'fill'
`data-scope`	'button-group'
`data-size`	\| 'sm' \| 'md' \| 'lg'
`data-variant`	\| 'fill' \| 'ghost' \| 'outline'

className

Value

'qui-button-group'

data-disabled

Value

data-emphasis

Value

| 'neutral'
| 'primary'
| 'danger'
| 'white-persistent'
| 'black-persistent'

data-layout

Value

| 'hug'
| 'start'
| 'end'
| 'fill'

data-scope

Value

'button-group'

data-size

Value

| 'sm'
| 'md'
| 'lg'

data-variant

Value

| 'fill'
| 'ghost'
| 'outline'

Button

Icon Button

Button Group

Usage

Examples

Shared Props

Layout

Accessibility

API

<ButtonGroup>