Button

Atlas provides three core button styles.

  1. Secondary (default)
  2. Primary
  3. Semantic Colors

Each style is explained below, detailing how and where to use them.

Secondary

All buttons, by default, are secondary buttons. There are three graduating secondary styles.

  1. Outlined (Default)
  2. Clear
  3. Filled
Type Class Default State Hover Disabled
Outlined .button
Clear .button .button-clear
Filled .button .button-filled
HTML
<button class="button">Click me!</button>

Primary

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
HTML
<button class="button button-primary">Click me!</button>

Semantic Colors

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

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
HTML
<button class="button button-danger">Click me!</button>

Success

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
HTML
<button class="button button-success">Click me!</button>

Warning

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
HTML
<button class="button button-warning">Click me!</button>

Variations

Although variations are discussed one at a time on this page, you are able to use any combination of them together!

Size

Make a button smaller or bigger than the default.

HTML
<button class="button button-sm">Small</button>
<button class="button">Default</button>
<button class="button button-lg">Large</button>

Block button

Make a button take up the full width of a container.

HTML
<button class="button button-block">Block</button>

Loading buttons

Ensure the user knows they need to wait for some event (like a fetch request) in order to interact with a button.

HTML
<button class="button is-loading">Loading</button>
<button class="button button-primary button-filled is-loading">Loading</button>

Figma