NJ Web Design System (v2.1.0)

Buttons: Tertiary Light 

<div class="padding-1" style="max-width: fit-content">
    <button class="usa-button usa-button--unstyled">Default</button>
    <button class="usa-button usa-button--unstyled usa-button--hover">Hover</button>
    <button class="usa-button usa-button--unstyled usa-button--active">Active</button>
    <button class="usa-button usa-button--unstyled usa-focus">Focus</button>
    <button class="usa-button usa-button--unstyled nj-button--icon">
        Icon Trailing
        <svg class="usa-icon usa-icon--size-3 margin-left-105" aria-hidden="true" focusable="false" role="img">
            <use xlink:href="../../dist/img/sprite.svg#accessibility_new"></use>
        </svg>
    </button>
    <button class="usa-button usa-button--unstyled nj-button--icon">
        <svg class="usa-icon usa-icon--size-3 margin-right-105" aria-hidden="true" focusable="false" role="img">
            <use xlink:href="../../dist/img/sprite.svg#accessibility_new"></use>
        </svg>
        Icon Leading
    </button>
    <button aria-label="icon-label" class="usa-button usa-button--unstyled nj-button--icon">
        <svg class="usa-icon usa-icon--size-3" focusable="false" role="img">
            <use xlink:href="../../dist/img/sprite.svg#accessibility_new"></use>
        </svg>
    </button>
</div>

No notes defined.

{%- set buttonClasses = 'usa-button ' + (classes | default('')) -%}

{%- if (label == 'Secondary Buttons (Dark)') or (label == 'Primary Buttons (Dark)') or (label == 'Tertiary/Link Dark Buttons') -%}
<div class="bg-base-darkest padding-1" style="max-width: fit-content">
{% else -%}
<div class="padding-1" style="max-width: fit-content">
{% endif -%}

  <button class="{{ buttonClasses | trim }}">Default</button>
  <button class="{{ buttonClasses | trim }} usa-button--hover">Hover</button>
  <button class="{{ buttonClasses | trim }} usa-button--active">Active</button>
  <button class="{{ buttonClasses | trim }} usa-focus">Focus</button>
  <button class="{{ buttonClasses | trim }} nj-button--icon">
    Icon Trailing
    <svg class="usa-icon usa-icon--size-3 margin-left-105" aria-hidden="true" focusable="false" role="img">
      <use xlink:href="{{ uswds.path }}/img/sprite.svg#accessibility_new"></use>
    </svg>
  </button>
  <button class="{{ buttonClasses | trim }} nj-button--icon">
    <svg class="usa-icon usa-icon--size-3 margin-right-105" aria-hidden="true" focusable="false" role="img">
      <use xlink:href="{{ uswds.path }}/img/sprite.svg#accessibility_new"></use>
    </svg>
    Icon Leading
  </button>
  <button aria-label="icon-label" class="{{ buttonClasses | trim }} nj-button--icon">
    <svg class="usa-icon usa-icon--size-3" focusable="false" role="img">
      <use xlink:href="{{ uswds.path }}/img/sprite.svg#accessibility_new"></use>
    </svg>
  </button>
</div>
 
package:
  name: null
  version: 2.1.0
uswds:
  path: ../../dist
category: Tertiary/Danger
label: Tertiary/Link Light Buttons
classes: usa-button--unstyled