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
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
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.
Antomy
There are several layout options for button groups, including icon button groups, and button groups with overflow.
Icon Button Groups
Types & Sizes
With Text
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.
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">
<clr-icon shape="check" title="Check"></clr-icon>
</button>
<button class="btn">
<clr-icon shape="home" title="home"></clr-icon>
</button>
<button class="btn">
<clr-icon shape="user" title="user"></clr-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">
<clr-icon shape="ellipsis-horizontal"></clr-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">
<clr-icon shape="home"></clr-icon>
<span class="clr-icon-title">Home</span>
</button>
<button class="btn">
<clr-icon shape="cog"></clr-icon>
<span class="clr-icon-title">Settings</span>
</button>
<div class="btn-group-overflow open">
<button class="btn dropdown-toggle">
<clr-icon shape="ellipsis-horizontal"></clr-icon>
</button>
<div class="dropdown-menu">
<button class="btn">
<clr-icon shape="user"></clr-icon>
<span class="clr-icon-title">User</span>
</button>
<button class="btn">
<clr-icon shape="cloud"></clr-icon>
<span class="clr-icon-title">Cloud</span>
</button>
</div>
</div>
</div>
Icons with text
<div class="btn-group btn-primary">
<button class="btn">
<clr-icon shape="home"></clr-icon>
Home
</button>
<button class="btn">
<clr-icon shape="cog"></clr-icon>
Settings
</button>
<div class="btn-group-overflow open">
<button class="btn dropdown-toggle">
<clr-icon shape="ellipsis-horizontal"></clr-icon>
</button>
<div class="dropdown-menu">
<button class="btn">
<clr-icon shape="user"></clr-icon>
User
</button>
<button class="btn">
<clr-icon shape="cloud"></clr-icon>
Cloud
</button>
</div>
</div>
</div>
Checkbox
<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
<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>