Button groups are for creating collections of similar type action buttons.

Usage

Button groups follow normal Button design guidelines. All Button options regarding classes and sizes apply to Button Groups. All features below are available with Solid, Outline and Flat in normal and small sizes.

Button groups can be also used as alternatives for checkboxes and radio buttons.

Button Groups as Checkboxes

Use when a small list of options can be selected from, similar to the Checkbox component

• blue indicates an option is selected, white (outline) indicates an unselected option
• user can click the button to select, and click again to deselect
• can be configured with preselected options

Apples

Oranges

Kiwis

Pears

Use option labels that are 1-3 short words.

Apples

Fresh Local Gold Kiwis

Use option labels that are long or more than 3 words.

Button Groups as Radio Buttons

Use when selecting one option from a small list of options, similar to the Radio component

• blue indicates an option is selected, white (outline) indicates an unselected option
• user can click the button to select, and click again to deselect
• can be configured with preselected options

Pears

Kiwis

Oranges

Use option labels that are 1-3 short words.

Pears

Fresh Local Gold Kiwis

Use option labels that are long or more than 3 words.

Types

Solid button groups direct the user's attention to the primary actions the application is suggesting the user take.

Outline groups are used to indicate a set of secondary actions or to reduce the visual noise on a page.

Flat button groups are used as a set of tertiary actions. They are also typically used in Cards and above Datagrids.

Mixed Classes

Button Arrangement

Arrange primary actions on the left, followed by secondary actions, and warning actions as the last button in a group.

Arrange warning actions as the first button in a group or have secondary actions before primary actions.

Group Style

Mix similar styled classes together to suit the solution's needs.

Mix differently styled classes together, like solid and outlined.

Antomy

There are several layout options for button groups, including icon button groups, and button groups with overflow.

Icon Button Groups

Types & Sizes

Icon button groups are available in the solid, outline, and flat types. It’s also best to use the normal (36px) sized ones. This makes them easier to recognize and to click.

Use small icon buttons in most cases. They are difficult to see and distinguish what the icon is or represents. They also create smaller click targets, making them harder to click.

With Text

If you have the space, adding text helps users understand the action. Start icon buttons with icons and follow with text.

Start icon buttons with text and follow with icon. This makes them more difficult to scan quickly.

Button Groups with Overflow

Overflow is used when the button group is larger than its containing space, or used to preserve space. The overflow is configurable so you can assign button actions to the dropdown menu.

• Overflow button is shown below as an ellipsis button in the button group and is the last position to the right
• Clicking on the ellipsis will show the overflow dropdown menu

Icons

• Button groups with text and icons, or just icons, will have text show in the dropdown menu
• Text for each action icon is needed for overflow to work properly

Multiple Groups

Use when you want similar actions to be grouped together and separated from others.

Lead with primary actions followed by secondary actions.

Lead with secondary actions followed by primary actions.

Code & Examples

Menu overflow

Use the clrInMenu input to determine if a button belongs in the overflow menu or not.

Default position

<clr-button-group class="btn-primary">
  <clr-button>Create</clr-button>
  <clr-button>Favorite</clr-button>
  <clr-button [clrInMenu]="true">Assign</clr-button>
  <clr-button [clrInMenu]="true">Download</clr-button>
  <clr-button [clrInMenu]="true">Delete</clr-button>
</clr-button-group>

Menu Position

<clr-button-group class="btn-primary" [clrMenuPosition]="'bottom-right'">
  <clr-button>Create</clr-button>
  <clr-button>Favorite</clr-button>
  <clr-button [clrInMenu]="true">Assign</clr-button>
  <clr-button [clrInMenu]="true">Download</clr-button>
  <clr-button [clrInMenu]="true">Delete</clr-button>
</clr-button-group>

Accessibility

If your icon button has no text, we recommend adding the title="" attribute to your icon buttons. This adds some additional context for users unfamiliar with what action your icon button might produce. The text should reflect the action.

<div class="btn-group btn-primary btn-icon">
  <button class="btn">
    <cds-icon shape="check" title="Check"></cds-icon>
  </button>
  <button class="btn">
    <cds-icon shape="home" title="home"></cds-icon>
  </button>
  <button class="btn">
    <cds-icon shape="user" title="user"></cds-icon>
  </button>
</div>

Code & Examples

Clarity defines three button group types:

• Solid. A solid background with light text. These buttons are prominent on the page.
• Outline. A transparent background with colored border and text. On hover, the button fills with color.
• Flat. Text in Action Blue, used to indicate an action.

Clarity Buttons primary, outline and flat classes can be used along with the .btn-group class to style the buttons in a Button Group.

Basic Structure

<div class="btn-group btn-primary">
  <button class="btn">Add</button>
  <button class="btn">Edit</button>
  <button class="btn">Download</button>
  <button class="btn">Delete</button>
</div>

Overflow

<div class="btn-group btn-primary">
  <button class="btn">Add</button>
  <button class="btn">Edit</button>
  <div class="btn-group-overflow open">
    <button class="btn dropdown-toggle">
      <cds-icon shape="ellipsis-horizontal"></cds-icon>
    </button>
    <div class="dropdown-menu">
      <button class="btn">Download</button>
      <button class="btn">Delete</button>
    </div>
  </div>
</div>

Primary

<div class="btn-group btn-primary">
  <button class="btn">Add</button>
  <button class="btn">Edit</button>
  <button class="btn">Download</button>
  <button class="btn">Delete</button>
</div>

Outline

<div class="btn-group">
  <button class="btn">Add</button>
  <button class="btn">Edit</button>
  <button class="btn">Download</button>
  <button class="btn">Delete</button>
</div>

Flat

<div class="btn-group btn-link">
  <button class="btn">Add</button>
  <button class="btn">Edit</button>
  <button class="btn">Download</button>
  <button class="btn">Delete</button>
</div>

Small

<div class="btn-group btn-outline-primary btn-sm">
  <button class="btn">Add</button>
  <button class="btn">Edit</button>
  <button class="btn">Download</button>
  <button class="btn">Delete</button>
</div>

Mixed

Override a Button type in a Button Group by extending the Button type class directly on the corresponding Button.

<div class="btn-group btn-primary">
  <button class="btn">Favorite</button>
  <button class="btn btn-success">Add</button>
  <button class="btn btn-danger">Delete</button>
</div>

Icons

Text wrapped in .clr-icon-title is only displayed in the Overflow Menu.

<div class="btn-group btn-primary btn-icon">
  <button class="btn">
    <cds-icon shape="home"></cds-icon>
    <span class="clr-icon-title">Home</span>
  </button>
  <button class="btn">
    <cds-icon shape="cog"></cds-icon>
    <span class="clr-icon-title">Settings</span>
  </button>
  <div class="btn-group-overflow open">
    <button class="btn dropdown-toggle">
      <cds-icon shape="ellipsis-horizontal"></cds-icon>
    </button>
    <div class="dropdown-menu">
      <button class="btn">
        <cds-icon shape="user"></cds-icon>
        <span class="clr-icon-title">User</span>
      </button>
      <button class="btn">
        <cds-icon shape="cloud"></cds-icon>
        <span class="clr-icon-title">Cloud</span>
      </button>
    </div>
  </div>
</div>

Icons with text

<div class="btn-group btn-primary">
  <button class="btn">
    <cds-icon shape="home"></cds-icon>
    Home
  </button>
  <button class="btn">
    <cds-icon shape="cog"></cds-icon>
    Settings
  </button>
  <div class="btn-group-overflow open">
    <button class="btn dropdown-toggle">
      <cds-icon shape="ellipsis-horizontal"></cds-icon>
    </button>
    <div class="dropdown-menu">
      <button class="btn">
        <cds-icon shape="user"></cds-icon>
        User
      </button>
      <button class="btn">
        <cds-icon shape="cloud"></cds-icon>
        Cloud
      </button>
    </div>
  </div>
</div>

Checkbox

Apples

Oranges

Kiwis

Pears

<div class="btn-group">
  <div class="checkbox btn">
    <input type="checkbox" id="btn-demo-check-1" />
    <label for="btn-demo-check-1">Apples</label>
  </div>
  <div class="checkbox btn">
    <input type="checkbox" id="btn-demo-check-2" checked />
    <label for="btn-demo-check-2">Oranges</label>
  </div>
  <div class="checkbox btn">
    <input type="checkbox" id="btn-demo-check-3" />
    <label for="btn-demo-check-3">Kiwis</label>
  </div>
  <div class="checkbox btn">
    <input type="checkbox" id="btn-demo-check-4" checked />
    <label for="btn-demo-check-4">Pears</label>
  </div>
</div>

Radio

Apples

Oranges

Kiwis

Pears

<div class="btn-group">
  <div class="radio btn">
    <input type="radio" name="btn-group-demo-radios" id="btn-demo-radio-1" />
    <label for="btn-demo-radio-1">Apples</label>
  </div>
  <div class="radio btn">
    <input type="radio" name="btn-group-demo-radios" id="btn-demo-radio-2" />
    <label for="btn-demo-radio-2">Oranges</label>
  </div>
  <div class="radio btn">
    <input type="radio" name="btn-group-demo-radios" id="btn-demo-radio-3" />
    <label for="btn-demo-radio-3">Kiwis</label>
  </div>
  <div class="radio btn">
    <input type="radio" name="btn-group-demo-radios" id="btn-demo-radio-4" checked />
    <label for="btn-demo-radio-4">Pears</label>
  </div>
</div>

Angular component

Use the clrInMenu input to determine if a Button belongs in the Overflow Menu or not

<clr-button-group class="btn-primary">
  <clr-button>Create</clr-button>
  <clr-button>Favorite</clr-button>
  <clr-button [clrInMenu]="true">Assign</clr-button>
  <clr-button [clrInMenu]="true">Download</clr-button>
  <clr-button [clrInMenu]="true">Delete</clr-button>
</clr-button-group>