Buttons

Solid button

This is the primary button, this should be used for a call to action. A interface element, should contain 1 primary button.

<button class="button button--primary">Button</button>

Outline button

This is the secondary button, this can be used for all secondary actions.

<button class="button button--secondary">Button</button>

Link button

When is the tertiary button.

<button class="button button--link">Button</button>

Icon button

All buttons can be used as an icon only button, make sure that all icon buttons contain an bla with the class sr-only, so that the button is still accessible.

<button class="button button--primary button--icon">
  <svg class="w-5 aspect-square" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
    <!-- SVG content -->
  </svg>
  <span class="sr-only">This is a label</span>
</button>