Button Group

Grouped actions with shared borders and compact horizontal layouts.

Preview

Usage

import { FrButtonModule } from '@frame-ui-ng/components/button';
import { FrButtonGroupModule } from '@frame-ui-ng/components/button-group';

HTML

<div frButtonGroup>
  <button frButton appearance="outline" type="button">
    <span frButtonIcon>
      <ng-icon name="tablerPlus" size="16" />
    </span>
    <span frButtonLabel>Create</span>
  </button>

  <button frButton appearance="outline" type="button">
    <span frButtonLabel>Review</span>
  </button>
</div>

Examples

Basic

Use a horizontal group when several related actions or view states should read as one compact control cluster.

Vertical

Use vertical orientation when grouped actions stack in sidebars, settings panels, or narrow tool trays.

Icon actions

Icon buttons group well for compact display-mode switches or toolbar actions, as long as each button has an accessible label.

Mixed emphasis

You can mix contained button appearances, but use that sparingly so the group still reads as one coordinated control.

Custom Styling

Button group itself is structural, so most visual customization happens by scoping button tokens to the grouped children. That keeps the shared borders and collapsed radii while letting you tune the contained buttons.

Token Inspector

Button Group is structural and does not introduce its own component token set. The grouped controls inherit their visual styling from Button, so inspect the grouped button shell, icon, and label to see the button tokens that drive the final result inside the group.

Design Tokens

Button Group does not define its own component-specific design tokens. It inherits the visual token surface from Button, while the group itself only applies structural layout rules such as collapsed borders and shared radii.