# Button - Design guidelines

Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.

## Anatomy
<img src="/images/uxd/button-2.png">

- **Label:** The text displayed on the button, indicating its function.
- **Icon:** Iconography that enhances the function.
- **Background:** The background color or style that defines the button's appearance.
- **Border:** The outline surrounding the button, providing visual separation from surrounding elements.
- **Shape:** The standard shape is rectangular but the component also supports a rounded format.

## Standard Use and Hierarchy

There are four different standard buttons with different purposes and hierarchies to help the user distinguish the level of importance of the task they represent.

<img src="/images/uxd/button-1.png">


| Button  | Variant (style) | How to use                                                               |
| ------- | --------------- | ------------------------------------------------------------------------------------------------- |
| Brand   | Brand (default) | Extra high emphasis button used for critical user flows and conversion, i.e. "Create account".   |
| Primary | Primary (default) | Standard call to action button used for the next step in user flows, i.e. "Next question" in a quiz. |
| Secondary | Secondary (default) | Used for non-primary actions, i.e. "All news" to expand a list.                                    |
| Ghost   | Primary (outline) | Used as the secondary option in a pair with brand or primary.                                      |

## Variants

| Variant      | How to use                                                                                   |
| ------------ | ---------------------------------------------------------------------------------------------- |
| Brand        | Extra high emphasis button used for critical user flows.                                        |
| Primary      | High emphasis button used for important user actions.                                            |
| Secondary    | Medium emphasis button used for non-primary actions.                                            |
| Static white | Used if the button should have a white background regardless of light/dark theme.              |

## Emphasis Styles

| Style       | Description                                                                                   |
| ----------- | --------------------------------------------------------------------------------------------- |
| Elevated    | Raised appearance, indicating prominence.                                                    |
| Default     | Standard appearance, blending with the content.                                                |
| Outline     | Minimalistic outline appearance, providing contrast.                                           |
| Transparent | No visible background, seamlessly integrating.                                                |

## Dos

- **Use Primary Buttons for Key Actions:** Employ primary buttons for primary actions within a given context, guiding user focus towards important interactions.
- **Provide Clear Labeling:** Ensure button labels are concise, descriptive, and indicative of the action they perform, enhancing usability.
- **Maintain Visual Hierarchy:** Utilize secondary and outline buttons to distinguish lesser actions or provide alternative choices, maintaining a clear visual hierarchy.

## Don'ts

- **Avoid Ambiguous Labels:** Refrain from using vague or ambiguous labels that might confuse users about the button's function.
- **Overuse of Primary Buttons:** Reserve primary buttons for the most crucial actions to avoid overwhelming users with excessive visual weight.