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--solid group">Button</button>

Button variations

<button class="button button--solid bg-grey-700 hover:bg-red-500 group">
  <span class="button__label">Log in</span>
  <svg
    class="aspect-square h-3.5 -rotate-45 transition-transform group-hover:rotate-0"
    viewBox="0 0 16 16"
    xmlns="http://www.w3.org/2000/svg"
  >
    <!-- SVG content -->
  </svg>
</button>

Outline button

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

<button class="button button--outline group">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--solid button--icon">
  <svg class="w-4 aspect-square" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
    <!-- SVG content -->
  </svg>
  <span class="sr-only">This is a label</span>
</button>

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