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.

  • <a> for navigation
  • <button> for everything else.
  • <input[type="submit"]> to trigger default browser behaviour associated with submitting form input.

Inverted 


			
				<button class="c-button c-button--inverted ">
	<span class="c-button__text">Primary button inverted</span>
</button>

Primary 


			
				<button class="c-button  ">
	<span class="c-button__text">Primary button</span>
</button>

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

A secondary button is created by applying the modifiers:

  • c-button--secondary

The green variant is created by applying the modifiers:

  • c-button--secondary-green

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

Documentation

Modifiers

  • c-button--secondary

    Create a secondary button based on the properties of a primary. Differentiating mainly in background-color and text-color.

  • c-button--inverted

    Creates a button with the inverted state of the modifier applied to.

States

  • is-disabled

    Indicates that the button is disabled