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.


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
<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

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>

Block button

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

<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.

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

Adaptive buttons

The default clear button picks up the color the text set on a container. It is best used as an color-accessible button on a color not part of one of the Atlas themes. These button do not support loading states.

Note! These buttons are not intended to be full featured, but rather to work when our typical themed buttons won't satisfy color requirements for non-standard background. Use with care, and always test for a contrast ratio of greater than 4.5:1 between foreground and background. When using them, it is recommended that you use a static text color, or to use in conjuction with a theme class to prevent accidental effects on other themes.

<div class="padding-lg theme-light background-color-alternate color-warning">
    <button class="button button-clear">Adaptive clear</button>
    <button class="button button-clear border">Adaptive with border</button>
    <button class="button button-clear border" disabled>Adaptive disabled</button>