Button

Buttons

Primary buttons are used sparingly on the site, reserved for links to higher-profile content. The secondary and disabled button styles are not in use at all, but may be handy if forms are created in the future.

<!-- Primary -->
<button class="button-primary">Primary button</button>

<!-- toggle-filter -->
<!-- <button class="toggle-filters toggle-desktop" is="eiti-toggle" aria-controls="filters" data-expanded-text="Hide filters" data-collapsed-text="Show filters" data-toggler="filters">Show filters</button> -->

<!-- Secondary -->
<button class="button-secondary">Secondary button</button>

<!-- toggle-filter -->
<!-- <button class="toggle-filters toggle-desktop" is="eiti-toggle" aria-controls="filters" data-expanded-text="Hide filters" data-collapsed-text="Show filters" data-toggler="filters">Show filters</button> -->

<!-- Tertiary -->
<button class="button-tertiary">Tertiary button</button>

<!-- toggle-filter -->
<!-- <button class="toggle-filters toggle-desktop" is="eiti-toggle" aria-controls="filters" data-expanded-text="Hide filters" data-collapsed-text="Show filters" data-toggler="filters">Show filters</button> -->

<!-- Disabled -->
<button class="button-disabled">Disabled button</button>

<!-- toggle-filter -->
<!-- <button class="toggle-filters toggle-desktop" is="eiti-toggle" aria-controls="filters" data-expanded-text="Hide filters" data-collapsed-text="Show filters" data-toggler="filters">Show filters</button> -->

<button class="{{ className }}">{{ text }}</button>

  <!-- toggle-filter -->
  <!-- <button class="toggle-filters toggle-desktop" is="eiti-toggle" aria-controls="filters" data-expanded-text="Hide filters" data-collapsed-text="Show filters" data-toggler="filters">Show filters</button> -->
/* Primary */
{
  "className": "button-primary",
  "text": "Primary button"
}

/* Secondary */
{
  "className": "button-secondary",
  "text": "Secondary button"
}

/* Tertiary */
{
  "className": "button-tertiary",
  "text": "Tertiary button"
}

/* Disabled */
{
  "className": "button-disabled",
  "text": "Disabled button"
}