{# ========================================================================= #}
{# :: Inheritance #}
{# ========================================================================= #}
{% extends "brandplatform/base/extends/component/page.njk" %}

{# ========================================================================= #}
{# :: Info #}
{# ========================================================================= #}
{% set info %}

Small interactive component that can either be used to indicate an action or
used as a way to navigate between pages.

- Use `<a>` for navigation
- Use `<button>` for everything else and general actions
- Use `<input[type="submit"]>` to trigger default browser behaviour associated with submitting form input

{% endset %}

{# ========================================================================= #}
{# :: Modifiers #}
{# ========================================================================= #}
{% set modifiers %}

- a-button--secondary

  Creates a button of the secondary type with a background gradient based on the
  secondary colors of the brand.

- a-button--outline

  Create a button that is instead outlined with borders based on the previous
  applied modifiers. Will behave differently on a default button when
  other modifiers are applied.

- a-button--ghost

  Creates a buttun with no border and no background, basically resets the button
  to a more neutral state.

- a-button--icon-after

  Used only in combination with an icon on a button, the icon is placed by default
  on the left side of the text. This modifier changes the icon position to the right.

- a-button--theme-grey

  Changes the color of the button to a more grey-like version. Can be combined with
  other modifiers.

- a-button--theme-black

  Changes the color of the button to a black version. Can be combined with other
  modifiers.

- a-button--icon

  Use this modifier only when indicating that the button only contains an icon and
  no text. This will remove any spacing around the icon.

- a-button--fill-space

  Make sure that the button takes up the entire empty space of its container
  by settings its width to 100%.

{% endset %}

{# ========================================================================= #}
{# :: States #}
{# ========================================================================= #}
{% set states %}

- is-disabled/disabled

  On `<button>` or `<input type="submit">` buttons the disabled attribute can be
  used to indicate that the button is not clickable. On an `<a>` the class **is-disabled**
  can be used to make sure it is not clickable.

{% endset %}

{# ========================================================================= #}
{# :: States #}
{# ========================================================================= #}
{# {% set states %}

{% endset %} #}