Button Group

Overview
Specs
Guidelines

Component

It’s a set of at least two selectable buttons and it can contain icons or labels.

It can be single or multiple selection, from two to five options.

button-group-anatomy — Button Group Anatomy

A – Icon Variation

B – Single Selection

C – Multi Selection

1 – Button/Option

2 – Label

button-group-ex1 — Button Group applied as filter

Used for:

Filtering options

Allow users to filter by categories such as price range, size, color or priority;

Sort functionality

On a dashboard or data table, a button group can provide sorting options such as sorting by date, name or relevance;

Navigation Menu

Provides users with quick access to different sections or features.

Selection

Provides multiple choice options in a visually appealing way;

Toggle buttons

To switch between different modes or views, such as a light/dark theme toggle or a grid/list view toggle, a button group can be used to easily switch between options;

Don’t use it for:

Single Option Selection

If there’s only one option available or if only one selection is allowed at a time, use a checkbox instead.

Large number of options

If there are too many options to fit comfortably in a button group, use a select box instead.

Complex hierarchical structures

Button groups are not suitable for presenting complex hierarchical structures or nested options. In such cases, another interface element such as a tree view or a drop-down menu may be more appropriate.

Dynamic content

If the options or choices within the group are subject to frequent changes or updates, a more flexible interface component may be required to accommodate dynamic content.

Non-discrete options

Button groups are designed to present discrete, mutually exclusive options. If the options are continuous or overlapping, such as in a combo box or slider, a different type of control should be used.

button-group-ex2 — Button Group applied as selection

Demo

Access the Figma file and inspect element using Dev Mode.

button-group-at-figma — Button Group at Figma

Open Figma

Last Update

06/02/2024

button-group-previous-version — Button Group previous version

button-group-current-version — Button Group current version

Added border-radius variables;
Added label as component;
Updated state color variables;
Reduced button group elements up to five;

Label

A Label serves as a crucial element for enhancing the clarity and usability of a digital interface …

Not Active

Enabled

.enabled {
    background-color: var(--grey-1);
    border-color: var(--grey-5);
    color: var(--grey-8);
}

Hover

.hover {
    background-color: var(--grey-3);
    border-color: var(--grey-5);
    color: var(--grey-9);
}

Pressed

.pressed {
    background-color: var(--grey-4);
    border-color: var(--grey-5);
    color: var(--grey-9);
}

Disabled

.disabled {
    background-color: var(--grey-2);
    border-color: var(--grey-4);
    color: var(--grey-6);
}

Focus

.focus {
    background-color: var(--grey-1);
    border-color: var(--grey-9);
    color: var(--grey-8);
}

Active

Enabled

.enabled {
    background-color: var(--grey-1);
    border-color: var(--grey-5);
    color: var(--theme-100);
}

Hover

.hover {
    background-color: var(--theme-10);
    border-color: var(--grey-5);
    color: var(--theme-100);
}

Pressed

.pressed {
    background-color: var(--theme-20);
    border-color: var(--grey-5);
    color: var(--theme-100);
}

Focus

.focus {
    background-color: var(--theme-10);
    border-color: var(--grey-9);
    color: var(--theme-100);
}

Variations

Type

Label

.small {
    label: small, left, 1 line, ;
}

.regular {
    label: regular, left, 1 line, ;
}

.large {
    label: large, left, 1 line, ;
}

Consult label component for more specs.

Icon

.small {
    icon: 20px ;
}

.regular {
    icon: 20px ;
}

.large {
    icon: 24px ;
}

Consult icon component for more specs.

Size

Small

.label {
    padding: var(--spacing-8) var(--spacing-4) var(--spacing-8) var(--spacing-4);
}

.icon {
    padding: var(--spacing-4);
}

Regular

.label {
    padding: var(--spacing-8) var(--spacing-12) var(--spacing-8) var(--spacing-12);
}

.icon {
    padding: var(--spacing-8);
}

Large

.label {
    padding: var(--spacing-8) var(--spacing-16) var(--spacing-8) var(--spacing-16);
}

.icon {
    padding: var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-8);
}

Position

Left

.left {
    border-radius: var(--x-small-radius) 0px 0px var(--x-small-radius);
}

Center

.center {
    border-radius: none;
}

Right

.right {
    border-radius: 0px var(--x-small-radius)  var(--x-small-radius) 0px;
}

Useful links

Consult our Figma file to access our assets and inspect them in dev mode.

Figma Component

This component is or will be provided by the Polygon framework. See its documentation to learn more.

Polygon Framework

This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.

Cegid DS

Behavior

Single Selection

It can only have one option selected.

If the button group is single selection, it only allows one selection to be active. If you click to select another item, the previously selected item changes to enabled.

Button Group single selection animation

Multi Selection

It can have more than one option selected.

If the button group is multiple selection, it allows more than one selection to be active. When you click to select another item, the previously selected item remains active.