Buttons

Overview
Specs
Guidelines

Component

It’s the area where the user can trigger an action and it can contain icons and labels.

Can be represented with the colors theme, grey and error. Alongside it can be combined with the variations primary, secondary, tertiary and text button.

Button Anatomy

A: Primary variation
B: Secondary variation
C: Tertiary variation
D: Text Button variation
1: Left icon
2: Label
3: Right icon

Used for:

Form submission

Used to submit data entered into forms, such as Submit or Send.

Progressing or regressing

Enables users to navigate within a Modal, including Next, Previous, Previous Step and Next Step.

Expansion buttons

Reveals additional content or options when clicked, like Show More or Expand.

File upload buttons

Initiates the process of uploading files or media, labeled as Upload File or Choose File.

Alternative actions

Offers an alternative action or serves as a backup option to the primary action, often labeled as Cancel, Close or Back.

Don’t use for:

Navigation within the page

Do not use buttons as navigational elements. Instead, use Links.

Ambiguous actions

If the action triggered by the button is ambiguous or may have unintended consequences, consider providing additional context or confirmation to prevent user errors.

Redundant content

Avoid introducing buttons that duplicate functionality already available through other interface elements.

Temporary content

Avoid using buttons for content that is temporary or transitional in nature. For example, elements that appear briefly for notifications or alerts may not require button interaction unless necessary.

Ambiguous actions inside a card

Glossary

If you’d like, you can consult the buttons glossary, which contains a set of buttons, their description and translations into Portuguese and Spanish.

Demo

Access the Figma file and inspect element using Dev Mode.

Open Figma

Last Update

11/07/2024

Buttons previous version

Buttons current version

Added counter guidelines;
Updated hierarchy guidelines.

Button Group

Group of selection options in button format which can be multiple or single selection …

Primary

Enabled

.enabled {
background-color: var(--Theme-100);
color: var(--grey-1);
}

Hover

.hover {
background-color: var(--Theme-80);
color: var(--grey-1);
}

Pressed

.pressed {
background-color: var(--Theme-highlight);
color: var(--grey-1);
}

.loading {
background-color: var(--Theme-100);
color-1: var(--Theme-80);
color-2: var(--Theme-60);
}

Disabled

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

Focus

.focus {
background-color: var(--Theme-80);
border-color: var(--Theme-highlight);
color: var(--grey-1);
}

Secondary

Enabled

.enabled {
background-color: var(--Theme-20);
color: var(--Theme-100);
}

Hover

.hover {
background-color: var(--Theme-40);
color: var(--Theme-highlight);
}

Pressed

.pressed {
background-color: var(--Theme-20);
border-color: var(--Theme-80);
color: var(--Theme-100);
}

.loading {
background-color: var(--Theme-20);
color-1: var(--Theme-80);
color-2: var(--Theme-60);
}

Disabled

.disabled {
background-color: var(--Grey-4);
color: var(--Grey-6);
}

Focus

.focus {
background-color: var(--Theme-20);
border-color: var(--Theme-highlight);
color: var(--Theme-100);
}

Tertiary

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);
}

.loading {
background-color: var(--Grey-1);
border-color: var(--Grey-5);
color-1: var(--Theme-80);
color-2: var(--Theme-60);
}

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(--Theme-highlight);
color: var(--Theme-100);
}

Text Button

Enabled

.enabled {
color: var(--Theme-100);
}

Hover

.hover {
background-color: var(--Theme-10);
color: var(--Theme-100);
}

Pressed

.pressed {
background-color: var(--Theme-20);
color: var(--Theme-100);
}

.loading {
color-1: var(--Theme-80);
color-2: var(--Theme-60);
}

Disabled

.disabled {
color: var(--Grey-6);
}

Focus

.focus {
border-color: var(--Theme-highlight);
color: var(--Theme-100);
}

Variations

Colors

Theme

Theme enabled variations

.primary-enabled { background-color: var(u002du002dTheme-100); color: var(u002du002dgrey-1); }n.secondary-enabled { background-color: var(u002du002dTheme-20); color: var(u002du002dTheme-100); }n.tertiary-enabled { background-color: var(u002du002dGrey-1); border-color: var(u002du002dGrey-5); color: var(u002du002dTheme-100); }n.text_button-enabled { color: var(u002du002dTheme-100); }n

Error

Error enabled variations

.primary-enabled { background-color: var(u002du002dError-100); color: var(u002du002dgrey-1); }n.secondary-enabled { background-color: var(u002du002dError-20); color: var(u002du002dError-100); }n.tertiary-enabled { background-color: var(u002du002dGrey-1); border-color: var(u002du002dGrey-5); color: var(u002du002dError-100); }n.text_button-enabled { color: var(u002du002dError-100); }

Grey

Grey Enabled Variations

.primary-enabled { background-color: var(u002du002dGrey-9); color: var(u002du002dgrey-1); }n.secondary-enabled { background-color: var(u002du002dGrey-2); color: var(u002du002dGrey-9); }n.tertiary-enabled { background-color: var(u002du002dGrey-1); border-color: var(u002du002dGrey-5); color: var(u002du002dGrey-8); }n.text_button-enabled { color: var(u002du002dGrey-8); }

Size

Small

.small {n  padding: var(u002du002dspacing-8) var(u002du002dspacing-4) var(u002du002dspacing-8) var(u002du002dspacing-4);n  gap: var(u002du002dspacing-4);n  border-radius: var(u002du002dx-small-radius);n  icon: icon: 20px;n  label: var(u002du002dButton-small);n}

Regular

.regular {n  padding: var(u002du002dspacing-12) var(u002du002dspacing-8) var(u002du002dspacing-12) var(u002du002dspacing-8);n  gap: var(u002du002dspacing-4);n  border-radius: var(u002du002dx-small-radius);n  icon: icon: 20px;n  label: var(u002du002dButton-regular);n}

Large

.large {n  padding: var(u002du002dspacing-16) var(u002du002dspacing-8) var(u002du002dspacing-16) var(u002du002dspacing-8);n  gap: var(u002du002dspacing-8);n  border-radius: var(u002du002dx-small-radius);n  icon: icon: 24px;n  label: var(u002du002dButton-large);n}

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

Min & Max Width

Ideally, for good UX practice, you shouldn’t use buttons that are too long. To prevent them from being deformed, a minimum and maximum width is applied to the button.

If the maximum width is exceeded, the label will be trimmed. Otherwise, the content is always centered. Depending on the size of the button, different minimum and maximum width must be applied:

Small: 46px min width, 160px max width;
Regular: 60px min width, 180px max width;
Large: 76px min width, 200 max width.

Min & Max Width

Don’t

Use different sizes in the same set.

Trimming

When a label is trimmed due to exceeding the maximum width, a tooltip must be displayed, for the user not to lose context of what action is being triggered.

Trimming is applied in order to avoid excessive content inside labels, as these must be short and concise within the context.

Trimming button hover

Hierarchy

Buttons follow a clear hierarchy to guide user actions effectively.

Primary Button

The primary button is the most prominent and should be used for the main action on a screen. For this reason, it always has the highest visibility.

Some common examples of the use of this button are destructive actions and confirmation prompts.

Dialog containing a primary button with high visibility

Secondary Button

Secondary Buttons provide alternative, less prominent actions. They’re often used to support primary actions without overshadowing them.

They can help represent actions or features users are likely to interact with, but aren’t required for their current task, such as editing a form or navigating to another page.

Tertiary Button

Tertiary Buttons are more subtle and typically used for less critical actions or complementary features. They are frequently dismissive or ones the user is less likely to use, such as clearing forms or closing a dialog.

More complex interfaces may require the implementation of several tertiary buttons. In order to maintain a good hierarchy and not overwhelm the interface, it’s often better to use text buttons. These have a similar purpose, but don’t stand out as much.

Stepper modal with tertiary and text buttons

Use different button hierarchies and in the following order: tertiary, secondary, primary.

Combine theme colors with grey.

Caution

When using secondary buttons of the same color together.

Don’t

Using red for less important actions makes it more difficult to focus on higher priority actions.

Badge

Some buttons may include a badge to indicate the number of records, such as the number of attached documents in a form. The counter provides a quick visual reference for users: