Components / Buttons

[erikapelser]

Buttons

There are three standard types of buttons:

1. Action button
A rectangular button coloured according to its hierarchy (Primary, Secondary)

Action button specification

2. Navigational button
Typically used for navigation, lights up on hover, and has a CerosBlue line displayed below the selection. Predominantly used in Admin

3. Control buttons
This button is only used in the studio and typically contains an icon. e.g the 'edit' and 'delete' icon in example below

Also see spacing and styling on these buttons by viewing the Iconography of this section

Choosing button style
Choosing a button style depends on the primacy of the button.
Function:
We currently have a pattern where Action buttons are used in Dialogue panels with the user, the Navigational button for navigating to other sections of the platform, and Control buttons for the Studio UI. So determine what your function is, and see if it fits into the existing pattern.
Layout:
Use primarily one type of button per container. Only mix button types when you have a good reason to, such as emphasizing an important function.

---

Working files
Illustrator file is here
Related topic in this styleguide - Iconography of this section