Button

Usage

Primary action button

These are used for important actions that users should not miss.

The primary button must be the most visible on a page. There must be a maximum of one primary button per screen to maintain a clear action-based hierarchy (outside of dialogs and other overlays). You do not always need to use a primary button on each screen, and they could require more or less visual weighting depending on the situation.

A primary action button is usually positioned to the right of a secondary button, but this may depend on the situation.

Secondary action button

These are used for basic actions: neither too visible, nor too discreet.

Use for neutral actions. Even though there is no limit on how many secondary buttons you can use, remember that less is more. A secondary button is easier to identify when placed next to a primary button than when placed separately. They could require more or less visual weight.

A secondary action button is usually positioned to the left of a secondary button, but this may depend on the situation.

Tertiary action button

Used for actions that must be available, but not advertised.

Use for actions that don't need to be very visible. These could be actions that users may not need to perform very often. In most cases, it is used for rollback actions such as “Cancel” and “Back”.

Critical action button

Use for actions that could have a destructive effect on the user’s data (for example, delete or remove). Use a confirmation dialog box before the action to be done. The critical button could be stressful for the user, so be thoughtful about using it.

For accessibility reasons, it is be recommended to use an icon related to the critical situation in addition to the button.

Semantic action button

Use the semantic buttons for positive, caution and negative actions. Use the appropriate style for these types of actions depending on the situation they will be used.

For accessibility reasons, it will be recommended to use an icon related to the semantic situation in addition to the button.

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.

Semantic color

Apply the semantic color when signalling, info, success, warning and critical messages. For accessibility reasons, we recommand using an icon.

Info: Informative, indicators, notifications, tips

Success: Positive, correct, confirmed, successful, completed, high

Warning: Important, low, moderate, insufficient, caution, average

Critical: 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 button components.

Filled 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 button

Use an outlined button for actions that need attention but aren’t the primary action, such as See all or Add to cart. This is also the button to use for giving someone the opportunity to change their mind or escape a workflow.

Text button

Use a text button to have less visual prominence. So, it should be used for low emphasis actions, such as an alternative option.

Anatomy and Content

Container

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

Button Text

• Choose a button text that is short and meaningful.
• Use a verb in the imperative for all action. For example: Save, Cancel, Edit)
• Keep in mind that the text is often longer in other languages
• The number of items can be added in parentheses. For example, Item (2)
• Keep the text in lowercase to provide an ease of reading.
• Text labels describe the action that will occur if a user clicks a button. If a text label is not used, an icon should be present to signify what the button does.
• For maximum legibility, a text label should remain on a single line. So, keep it short, clear, and fully visible. Labels should not be truncated or take up multiple lines.

Loading button

The loading buttons can show loading state and disable interactions.

Icon (optional)

Icons visually communicate the button’s action and help draw attention. They should be placed on the leading side of the button, before the label’s text.

Icon Buttons

• Text labels describe the action that will occur if a user clicks a button. If a text label is not used, an icon should be present to signify what the button does.
• Use a tooltip to show the label for icon buttons.

Button Shortcut

• Use a tooltip to show the keyboard shortcut for an action. The keyboard shortcut appears when you hover over or on keyboard focus state with a tooltip.

Behavior and interaction

A user interacts with the button by using 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

The button usually grows to fit the size of the text. In case of a fixed size for the button, the text truncates.

If the button is used in a responsive container or toolbar, it follows the responsive behavior defined for that element.

Density scale of the button

Guidance for use cases where increased density improves the user experience.

• Default: 38px
• Comfortable: 28px
• Compact: 24px

Feedback

Help us improve this component by sharing your feedback, questions, or comments with us on Teams