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.

Animated

px

			
				<a class="a-button " href="">
	<span class="a-button__text">Primary button</span>
</a>
			

		

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.

px

			
				<a class="a-button " href="">
	<span class="a-button__text">Primary button</span>
</a>
			

		

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.

px

			
				<a class="a-button " href="">
	<span class="a-button__text">a-button--inverted</span>
</a>
			

		

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.

px

			
				<a class="a-button " href="">
	<span class="a-button__text">Primary button</span>
</a>
			

		

Primary

The primary button should only be used once on each page (if possible) to highlight the most important action.

px

			
				<a class="a-button " href="">
	<span class="a-button__text">Primary button</span>
</a>
			

		

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

px

			
				<a class="a-button a-button--small" href="">
	<span class="a-button__text">Small primary button</span>
</a>
			

		

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

px

			
				<a class="a-button a-button--secondary" href="">
	<span class="a-button__text">Secondary button</span>
</a>
			

		

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.

px

			
				<a class="a-button a-button--outline" href="">
	<span class="a-button__text">Outline button</span>
</a>
			

		

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.

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.