For proper application, these buttons can be used for different purposes to enable easier and consistent combination when guiding users across digital experiences.

Function

The function of different buttons is what determines its usage and how well suited it is to be applied in a given scenario to solve an existing problem or complete a pending task. Functions or roles that can be assigned to buttons in a particular design include:

Primary Button

Primary buttons are used for the most important actions on a page. It should be the key button that helps the user navigate in a given flow or while trying to perform a specific action. This could apply in cases like when the user needs to submit a from, proceed to a new page, or complete an action. The filled button serves as the primary button.

Secondary Button

This is also used for important actions on a page, however, they mostly used as a supporting action for a primary button in order to provide options for users to select from. For instance, if the primary button offers the key action to be taken on a page, the secondary button offers a way to postpone that action or chose another which might either be of equal or lower importance than the option which the primary button highlights. The outlined button serves as the secondary button

Tertiary Button

The tertiary button is used for subtle actions that do not have the most prominence in a given array of options for users to select from. They can stand alone or be paired with a primary button to offer an option of much less importance than the key action intended to be taken by the user. The text button serves as the tertiary button.

CTA (Call to Action) button

This button is used to point the user not necessarily in the direction of their current flow, but possibly to an offering, feature, or product that could be potentially useful in providing much needed solutions that users desire which can be either new or already existing ones. They usually stand out from the other button categories so for easy identification and additional styling can be added to them to achieve this necessary distinction.

Danger Button

Danger buttons are used primarily to indicate crucial events. The key role that they serve is to point out to the user that an irreversible action is about to take place and as such confirmation is required in order to proceed.

Labeling

While the styling of a button gives quick indicators as to how it is to be used and what action it helps to complete, the key element that helps to provide a complete scope of the purpose of a button is the text label it contains. As such, button content should be concise and have as much description as possible to inform users of what the next step is.

Case style

Different case styles can be applied to buttons to serve as readable text that convey information. However, a rule of thumb is that all buttons follow one specific case style to enhance consistency and reduce distractions for the user. For all of our buttons, title case has been used as text labels.

Font Weight

Font weight can be used to good effect to provide proper emphasis to buttons as they convey the needed information. Chosen fonts should be legible with clear and readable characters that do not distract or cause difficulty while being read. Proper exploration should be carried out with the intended typeface to ensure it passes muster before proceeding to use it across all buttons.

Content

Characters in a button should not be full sentences. Instead, words or phrases that summarize the purpose of a button could suffice. Total text in a button is recommended to be an average of 20 characters long, The language used in buttons should also be consistent. For instance, if a button has a text label of 'Create Design', this convention should be maintained and not changed to something like 'New Design' later on.