Button Group

Button groups organize related actions into a cohesive unit, reducing visual clutter while maintaining clear relationships between similar functions.

import {ButtonModule} from "@qualcomm-ui/angular/button"

Usage

Use the q-button-group directive 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 q-button-group, 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

import {Component} from "@angular/core"
import {AArrowDown} from "lucide-angular"

import {ButtonModule} from "@qualcomm-ui/angular/button"
import {provideIcons} from "@qualcomm-ui/angular-core/lucide"

@Component({
  imports: [ButtonModule],
  providers: [provideIcons({AArrowDown})],
  selector: "button-group-shared-props-demo",
  template: `
    <div class="flex w-full flex-col gap-4">
      <div disabled q-button-group size="sm">
        <button q-button startIcon="AArrowDown" variant="ghost">Button</button>
        <button q-button startIcon="AArrowDown" variant="outline">
          Button
        </button>
        <button
          emphasis="primary"
          q-button
          startIcon="AArrowDown"
          variant="fill"
        >
          Button
        </button>
      </div>
      <div q-button-group variant="outline">
        <button q-button startIcon="AArrowDown">Button</button>
        <button q-button startIcon="AArrowDown">Button</button>
        <button emphasis="primary" q-button startIcon="AArrowDown">
          Button
        </button>
      </div>
    </div>
  `,
})
export class ButtonGroupSharedPropsDemo {}

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

@for (layout of layouts; track layout) {
  <div
    class="border-brand-primary border-1 border-dashed p-1.5"
    q-button-group
    [layout]="layout"
  >
    <button q-button startIcon="AArrowDown" variant="ghost">
      Button
    </button>
    <button q-button startIcon="AArrowDown" variant="outline">
      Button
    </button>
    <button
      emphasis="primary"
      q-button
      startIcon="AArrowDown"
      variant="fill"
    >
      Button
    </button>
  </div>
}

Accessibility

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

Prop	Type	Default
density The density of the buttons in the group. 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'
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.

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

Usage

Examples

Shared Props

Layout

Accessibility

API

q-button-group