Small interactive component that can either be used to indicate an action or used as a way to navigate between pages.
<a> for navigation<button> for everything else and general actions<input[type="submit"]> to trigger default browser behaviour associated with submitting form inputThis variation is used to create a button without any background or border. It only displays the text of the button. This can be combined with other modifiers to get a different result for the text.
<button
class="a-button a-button--ghost "
>
<span class="a-button__text">Ghost button</span>
</button>
Only use this button variation when you want to display only an icon as the button. This will remove the spacing between the icon and its text so that only the icon can be displayed. This can be combined with other modifiers
<button
class="a-button a-button--ghost "
>
<span class="a-button__text">Ghost button</span>
</button>
The outlined button is used to manipulate the look of the button it is combined with. The makes sure that the theme of the button is applied as a border instead of a background color. This can be combined with other modifiers.
<button
class="a-button a-button--outline "
>
<span class="a-button__text">Outline button</span>
</button>
<button
class="a-button a-button--outline icon-arrow-right "
>
<span class="a-button__text">Outline button</span>
</button>
<button
class="a-button a-button--outline a-button--icon-after icon-arrow-right "
>
<span class="a-button__text">Outline button</span>
</button>
<button class="a-button a-button--outline" disabled>
<span class="a-button__text">Outline button</span>
</button>
<button
class="a-button a-button--outline a-button--secondary "
>
<span class="a-button__text">Outline button</span>
</button>
<button
class="a-button a-button--outline a-button--secondary icon-arrow-right "
>
<span class="a-button__text">Outline button</span>
</button>
<button
class="a-button a-button--outline a-button--secondary a-button--icon-after icon-arrow-right "
>
<span class="a-button__text">Outline button</span>
</button>
<button class="a-button a-button--outline a-button--secondary" disabled>
<span class="a-button__text">Outline button</span>
</button>
The primary button is the default button and should only be used for the main actions. Only one primary button should be used next to each other when used in a call-to-action context.
<button
class="a-button "
>
<span class="a-button__text">Primary button</span>
</button>
The secondary button indicates a less important action compared to the primary button.
<button
class="a-button a-button--secondary "
>
<span class="a-button__text">Secondary button</span>
</button>
<button
class="a-button a-button--secondary icon-arrow-right "
>
<span class="a-button__text">Secondary button</span>
</button>
<button
class="a-button a-button--secondary a-button--icon-after icon-arrow-right "
>
<span class="a-button__text">Secondary button</span>
</button>
<button class="a-button a-button--secondary" disabled>
<span class="a-button__text">Secondary button</span>
</button>
This creates a button that does not really have any context, but changes the color theme in order for it to work better on certain backgrounds. This can for example be combined with a a-button--ghost modifier to change the color of the default ghost button.
<button
class="a-button a-button--ghost "
>
<span class="a-button__text">Ghost button</span>
</button>
This creates a button that does not really have any context, but changes the color theme in order for it to work better on certain backgrounds. This can for example be combined with a a-button--ghost modifier to change the color of the default ghost button.
<button
class="a-button a-button--ghost "
>
<span class="a-button__text">Ghost button</span>
</button>
a-button--secondary
Creates a button of the secondary type with a background gradient based on the secondary colors of the brand.
a-button--outline
Create a button that is instead outlined with borders based on the previous applied modifiers. Will behave differently on a default button when other modifiers are applied.
a-button--ghost
Creates a buttun with no border and no background, basically resets the button to a more neutral state.
a-button--icon-after
Used only in combination with an icon on a button, the icon is placed by default on the left side of the text. This modifier changes the icon position to the right.
a-button--theme-grey
Changes the color of the button to a more grey-like version. Can be combined with other modifiers.
a-button--theme-black
Changes the color of the button to a black version. Can be combined with other modifiers.
a-button--icon
Use this modifier only when indicating that the button only contains an icon and no text. This will remove any spacing around the icon.
a-button--fill-space
Make sure that the button takes up the entire empty space of its container by settings its width to 100%.
is-disabled/disabled
On <button> or <input type="submit"> buttons the disabled attribute can be
used to indicate that the button is not clickable. On an <a> the class is-disabled
can be used to make sure it is not clickable.