Button group¶

Usage¶

Button groups can contain standard buttons that perform actions, or selection buttons that represent modes or states.

Action button group¶

An action button group organizes related commands that belong to the same workflow or functional area. Each button performs its own action, and several buttons can be used in sequence.

An action button group is a simple row of independent buttons with no collapsing or overflow menu. Unlike the content action bar, a unified responsive menu bar treated as one navigable unit, each button in a button group receives focus individually when tabbing.

Use it for 2–4 direct, peer-level actions (e.g., Expand/Collapse) when distinct focus and a fixed layout are required instead of unified menu behavior.

Split button¶

A split button combines a primary action with a secondary dropdown of related options. It is useful when one action is the default or most common, but additional alternatives are available.

Use it to provide a quick “default” action while still offering variations (e.g., Save / Save as…)

Selection button¶

A selection button is used for switching between views, modes, or states, rather than executing direct actions. The group visually connects related choices and communicates a selection state instead of triggering independent commands.

It supports both single and multi-selection, depending on the context:

• Single selection: only one option can be active at a time (radio behavior), e.g., switching between different views such as All, Read and Unread.
• Multi-selection: several options can be active simultaneously (checkbox behavior), e.g., filtering by Temperature, Pressure, and Voltage.

Best practices¶

• For binary options, such as yes/no or on/off use a switch component.
• If there are more than five options or not enough horizontal space, use the select component.
• For multi-select scenarios with unrelated options, prefer the checkbox component.
• When switching between distinct content areas, such as sub-pages, use tabs component.
• Labels should use nouns or concise noun phrases that clearly describe the action or choice. Keep the text on a single line; avoid wrapping.

Design¶

Variants¶

Button group supports label+icon, label only and icon only.

Styles¶

The action button group and split button, inherits the same visual style and interaction states as standard buttons.

Although different hierarchies (e.g., primary, secondary, tertiary, or danger) can technically be combined within the same group, this is not recommended. All items in a button group should share the same visual style to ensure cohesion and clarity.

The selection button has a dedicated style and is only available in this variant.

Sizes¶

The button group follows the same sizing system as standard buttons. The default height size is 32px, matching the default button height.

A large size at 40px is also available for layouts that require increased prominence or touch-friendly targets.

A 28px small size supports dense, desktop-focused interfaces. Avoid using it in touch contexts (mobile or tablet) where larger tap areas are required.

Responsive behavior¶

The button group component is inherently horizontal and cannot be wrapped or stacked. To prevent overflow on smaller screens, keep the number of items minimal.

Alternatively, actions can be collapsed under a menu or replaced with a select, radio, or checkboxes component, depending on the interaction type.

Code¶

Button groups are created using CSS classes. The button group component is CSS-only and does not require any Angular components.

Usage¶

Wrap buttons in a btn-group container with the appropriate role and aria-label attributes for accessibility.

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

Button group sizes¶

Button groups support three sizes: small (btn-sm), default, and large (btn-lg).

<!-- Large group -->
<div class="btn-group" role="group" aria-label="Large group">
  <button type="button" class="btn btn-lg btn-secondary">Large</button>
  <button type="button" class="btn btn-lg btn-secondary">Group</button>
</div>

<!-- Default group -->
<div class="btn-group" role="group" aria-label="Default group">
  <button type="button" class="btn btn-secondary">Default</button>
  <button type="button" class="btn btn-secondary">Group</button>
</div>

<!-- Small group -->
<div class="btn-group" role="group" aria-label="Small group">
  <button type="button" class="btn btn-sm btn-secondary">Small</button>
  <button type="button" class="btn btn-sm btn-secondary">Group</button>
</div>

Icon-only buttons¶

For icon-only button groups, use the btn-icon class along with appropriate aria-label attributes.

<div class="btn-group" role="group" aria-label="Icon button group">
  <button type="button" class="btn btn-icon btn-secondary" aria-label="Edit">
    <i class="icon element-edit"></i>
  </button>
  <button type="button" class="btn btn-icon btn-secondary" aria-label="Copy">
    <i class="icon element-copy"></i>
  </button>
  <button type="button" class="btn btn-icon btn-secondary" aria-label="Delete">
    <i class="icon element-delete"></i>
  </button>
</div>

Action button group example¶

Split button¶

A split button combines a primary action with a dropdown menu of related options.

<div class="btn-group" role="group" aria-label="Split button">
  <button type="button" class="btn btn-primary">
    <i class="icon element-download"></i>
    Download
  </button>
  <button
    type="button"
    class="btn btn-primary btn-icon dropdown-toggle"
    aria-label="Dropdown toggle"
    [cdkMenuTriggerFor]="dropdownMenu"
  >
    <i class="dropdown-caret icon element-down-2"></i>
  </button>
</div>

Selection button¶

For selection-based button groups that represent different states or views, use radio buttons or checkboxes with button styling.

Single-select:

<div class="btn-group" role="group" aria-label="View selection">
  <input type="radio" class="btn-check" name="view" id="view-all" checked />
  <label class="btn" for="view-all">All</label>

  <input type="radio" class="btn-check" name="view" id="view-read" />
  <label class="btn" for="view-read">Read</label>

  <input type="radio" class="btn-check" name="view" id="view-unread" />
  <label class="btn" for="view-unread">Unread</label>
</div>

Multi-select:

<div class="btn-group" role="group" aria-label="Filter options">
  <input type="checkbox" class="btn-check" id="filter-temp" />
  <label class="btn" for="filter-temp">Temperature</label>

  <input type="checkbox" class="btn-check" id="filter-pressure" />
  <label class="btn" for="filter-pressure">Pressure</label>

  <input type="checkbox" class="btn-check" id="filter-voltage" />
  <label class="btn" for="filter-voltage">Voltage</label>
</div>