Buttons

There are three types of buttons:

• Default button is your basic button, it can appear multiple times in a given group.

• Primary button indicates the main call to action and should only appear once per group of buttons.

• CTA button is your Call To Action button. It is the single most important action on the page and takes higher priority over the Primary button type. It should be used only in specific instances such as the Sign-In process. It can only be used once per page.

There are three sizes of buttons:

• Extra Large: Use this button for important actions that are the primary focus of a page, for example 'Sign in' or 'Create account'.
• Large: The standard button size, prefer this button as a default size unless there is a reason to go up or down.
• Small: Try to avoid using this size if possible, but it is available for space constrained situations.

Buttons are positioned relatively according to the type of actions:

• Affirmative actions are placed on the right and continue the process. They are actions that are desired by users or the application.

• Dismissive actions are placed on the left and return the user to the previous screen or step in the process.

Align the button group to the right side of the container by default

With that said, you still have the flexibility to align the button groups differently based on the use case and visual balance.

Destructive actions may be affirmative actions

In some situations, destructive actions such as "delete" or “leave” may be affirmative actions. For example, an instructor attempts to delete a course. A modal shows up to confirm the action and make sure the instructor understand the consequences followed by the action. In such case, the "delete" button is an affirmative action.

A button is meant to direct users into taking certain actions. Help users by writing labels that clearly communicate what each button does.

Prefer to use a disabled button only if an action on the current screen can enable it (action possibility).

In situations where link styled text is to be used in place of a button for the purposes of de-emphasizing an action (visual hierarchy), link style buttons should be used. The premise stands that links are to be used for navigation and buttons are to be used for actions. Link buttons should not appear in a situation where they could be disabled.