Button
An interactive component which can be used to indicate an action to the user. Consists of different ranks to indicate the importance and the type of action is defined.
On grey background
When buttons are renderd on a grey background, the primary button should not receive any modifiers. Secondary and tertiary/outlined buttons must be placed inverted by applying the modifier a-button--inverted.
It is also recommended to change the disbabled state to make use of the is-disabled-alternative* to apply opacity instead of a grey theme.
On orange background
When buttons are renderd on an orange background, the primary, secondary and tertiary/outlined buttons must be placed inverted by applying the modifier a-button--inverted.
It is also recommended to change the disbabled state to make use of the is-disabled-alternative* to apply opacity instead of a grey theme.
On purple background
When buttons are renderd on a grey background, the primary button should not receive any modifiers. Secondary and tertiary/outlined buttons must be placed inverted by applying the modifier a-button--inverted.
It is also recommended to change the disbabled state to make use of the is-disabled-alternative* to apply opacity instead of a grey theme.
Primary
The primary button should only be used once on each page (if possible) to highlight the most important action.
Quaternary
Quartenary buttons are used on spaces where space is limited or as part of a more complicated interface with a lot of actions next to each other (My Cevora could benefit from these buttons for example).
Secondary
Secondary buttons can be used alongside the primary button to offer other, less important, possibilities. Use a secondary action next to a primary action when it is less important but still important. Use a tertiary action next to a primary action to enforce the importance of the primary action or if it’s less important than the secondary action (if present).
Tertiary
When a tertiary button is used alongside a primary or secondary button it is advised to use border- & textcolor associated with that button type.
Documentation
Modifiers
a-button--secondary
Create a secondary button based on the properties of a primary. Differentiating mainly in background-color and text-color.
a-button--outline
Create an outlined button consisting out of a border. This modifier can be combined with the a-button--secondary to change the outlined colors.
a-button--small
Create a button which seems smaller than the default component. Text and padding are different, but combining this modifier with secondary, or outlined modifiers allows you to create different variations.
a-button--inverted
Creates a button with the inverted state of the modifier applied to.
- Primary: turns to the styling of the secondary button
- Secondary: turns styling into a white theme
- Outline: turns the border into a white theme
a-button--animated
Create a button where the icon is animated while hovering.
a-button--rounded
Create a button where the corners are less rounded.
States
is-disabled-default
Indicate that the button is disabled, giving it a gray-like theme.
is-default-alternative
Indicate that the button is disabled, but instead of applying a gray theme, decrease the alpha/opacity value of the button to give it a proper visual look on color backgrounds. Important to note that this should only be applied when the button is rendered on a colored background instead of the base white one.