Button

The button component consists of a base element wich can exist out of a button text, a button text and icon (before or after) or a single icon. All optional. It has 3 levels of hierarchy: primary, secondary and tertiary buttons + a highlighted variant. All used for different purposes and roles throughout the entire website.

Highlight

The highlight button component is the orange variant of the button and has the option to add an icon left or right. Hovering it triggers the hover state, wich is a 5% darkened value of the background color.

This variant is only used to emphasize a button


			
				<button class="c-button c-button--highlight">
	<span class="c-button__text">Blijf op de hoogte</span>
</button>

Primary

The primary form of the button component uses the lightest blue variant and has the option to add an icon left or right. Hovering it triggers the hover state, wich is a 5% darkened value of the background color.


			
				<button class="c-button ">
	<span class="c-button__text">Blijf op de hoogte</span>
</button>

Secondary

The secondary form of the button component uses the middle blue variant and has the option to add an icon left or right. Hovering it triggers the hover state, wich is a 5% darkened value of the background color.


			
				<button class="c-button c-button--dark">
	<span class="c-button__text">Blijf op de hoogte</span>
</button>

Tertiary

The tertiary form of the button component uses a transparent background color and has a 1px border with the lightest blue variant border color. There is also a modifier that changes the border color to white. As all the other variants it has the option to add an icon left or right. Hovering it triggers the hover state, which is the same light blue color as the primary button.


			
				<button class="c-button c-button--border">
	<span class="c-button__text">Blijf op de hoogte</span>
</button>

Documentation

Modifiers

  • c-button--dark

    This modifier use darker blue variants and is used for secondary buttons.

  • c-button--border

    This modifier will add a border and remove the background color. It is used for tertiary buttons.

  • c-button--border-white

    This modifier will add a white border and remove the background color.

  • c-button--highlight

    This modifier will change the background color to orange. It is only used to emphasize a button.

  • c-button--without-skew

    This modifier will remove the skew. Only used in specific contexts such as when used in a flyout menu.

States

  • is-disabled

    This modifier will reduce the size of the image in its heights.