Atlas provides three core button styles.
- Secondary (default)
- Primary
- Semantic Colors
Each style is explained below, detailing how and where to use them.
All buttons, by default, are secondary buttons. There are three graduating secondary styles.
- Outlined (Default)
- Clear
- Filled
| Type | Class | Default State | Hover | Disabled |
|---|---|---|---|---|
| Outlined | .button | |||
| Clear | .button .button-clear | |||
| Filled | .button .button-filled |
<button class="button">Click me!</button>A visual style used to highlight only the most important actions. To avoid confusing users, don't use more than one primary button within a section or view. Note that the clear variant of primary buttons must be used on a very light background or it will not pass constrast requirements. If you run into this issue, try using link-button, which defaults to a slightly darker blue for this very reason.
| Type | Class | Default State | Hover | Disabled |
|---|---|---|---|---|
| Outlined | .button, .button-primary | |||
| Clear | .button, .button-primary, .button-clear | |||
| Filled | .button, .button-primary, .button-filled |
<button class="button button-primary">Click me!</button>Semantic colors denote standard value states (such as good, bad, or warning). Each color has the same basic meaning in all contexts. Our semantic color buttons are used infrequently.
Danger buttons are red on most themes. They help reiterature that the intended action is important or potentially dangerous (e.g., deleting an item or transferring ownership).
| Type | Class | Default State | Hover | Disabled |
|---|---|---|---|---|
| Outlined | .button, .button-danger | |||
| Clear | .button, .button-danger, .button-clear | |||
| Filled | .button .button-danger, .button-filled |
<button class="button button-danger">Click me!</button>Success buttons are green on most themes. This color stands for a good, positive situation or for the successful completion of a task. Use the good/positive semantic color if ...
- You need to highlight a good or positive status.
- A message contains information about a process that was finalized without any issues. Users need this information later on (for example, to copy values to another app).
| Type | Class | Default State | Hover | Disabled |
|---|---|---|---|---|
| Outlined | .button, .button-success | |||
| Clear | .button,.button-success, .button-clear | |||
| Filled | .button, .button-success .button-filled |
<button class="button button-success">Click me!</button>Warning buttons are yellow on most themes. This color indicates a critical situation or warning. Use this semantic color if ...
- You want to highlight a critical status.
- A minor problem has occcurred. The user can carry on working but might run into an error later on.
- The current mode or page can be finalized, but doing so might lead to an error later on.
- The user input was validated and a minor problem occurred. The user can continue without fixing the problem, but might lead to an error later on.
- A message contains information about a warning.
| Type | Class | Default State | Hover | Disabled |
|---|---|---|---|---|
| Outlined | .button, .button-warning | |||
| Clear | .button, .button-warning, .button-clear | |||
| Filled | .button , .button-warning, .button-filled |
<button class="button button-warning">Click me!</button>Although variations are discussed one at a time on this page, you are able to use any combination of them together!
Make a button smaller or bigger than the default.
<button class="button button-sm">Small</button>
<button class="button">Default</button>
<button class="button button-lg">Large</button>Make a button take up the full width of a container.
<button class="button button-block">Block</button>Ensure the user knows they need to wait for some event (like a fetch request) in order to interact with a button.
<button class="button is-loading">Loading</button>
<button class="button button-primary button-filled is-loading">Loading</button>