Icon button

Icon buttons allow users to take actions and make choices, with a single tap.

Usage

Use icon buttons to allow the user to take an action. Icon buttons should be used cautiously and only when an icon will suffice in place of a text label.

Icon buttons are used for simple actions that can be represented by an icon, such as Add (+).

Icon buttons are commonly found in app bars and toolbars.

Icons are also appropriate for toggle buttons that allow a single choice to be selected or deselected.

Color usage

The Cegid Design System includes color usage for button components.

Primary color: apply the brand primary color to define the primary action on the interface.

Secondary color: apply the brand secondary color when the situation focuses on pertinent information, chatbot, or help.

Neutral color : apply the brand tertiary color to a less prominent action.

Critical color : apply the critical color when signaling critical messages. Negative, wrong, dangerous, critical, problematic, incorrect, weak.

White color : apply the white color on top of primary or colorful backgrounds.

Types

The Cegid Design System includes three types of icon button components.

Filled icon button

The filled button’s contrasting surface color makes it the most prominent button after the FAB. It’s used for final or unblocking actions in a workflow.

Outlined icon button

Use an outlined icon button for actions that need attention but aren’t the primary action.

Icon only button

Use an icon only button to have less visual prominence. It should be used for low emphasis actions, such as an alternative option.

Anatomy and content

An icon button is made up of an icon and can also include a container depending on the context.

Icon buttons can be rounded or squared.

Use a tooltip to show the label for icon buttons.

Icon

Icons visually communicate the button’s action and help draw attention.
Icon buttons don’t include a text label. The icon should indicate clearly and unequivocally which action the user is triggering by clicking the button.

Container

Containers must inherit the radius defined in the design tokens.
Group internal elements together so that they scale together. Icons remain centered when button width increases.

Behavior and interaction

When a user clicks on an icon button, its corresponding action takes effect immediately.

States

Icon buttons can have one of the following states: enabled, hovered, focused, pressed or disabled.

A user interacts with the button by using a keyboard, touchscreen or screen reader. Use hover, pressed and focused states to provide button visuals feedbacks.

Use disabled state for actions that are not currently available, or temporarily unavailable. The surrounding interface should make it clear why the button is disabled and what needs to be done to enable it.

Responsiveness and density

If the button is used in a responsive container or toolbar, it follows the responsive behavior defined for that element.
You can adapt the size and color of the icon button to fit the design and accessibility requirements.

Density scale of the button

The standard icon button sizes are the following: 16px, 20px and 24px.