<div class="bg-base-darkest padding-1" style="max-width: fit-content">
<button class="usa-button usa-button--unstyled nj-button--unstyled-dark">Default</button>
<button class="usa-button usa-button--unstyled nj-button--unstyled-dark usa-button--hover">Hover</button>
<button class="usa-button usa-button--unstyled nj-button--unstyled-dark usa-button--active">Active</button>
<button class="usa-button usa-button--unstyled nj-button--unstyled-dark usa-focus">Focus</button>
<button class="usa-button usa-button--unstyled nj-button--unstyled-dark 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--unstyled-dark 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--unstyled-dark 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/Link
label: Tertiary/Link Dark Buttons
classes: usa-button--unstyled nj-button--unstyled-dark