Icon button

Icon buttons are a variation of buttons. Use them only to trigger actions.

Example

Fluid provides four icon buttons:

  • Primary
  • Secondary
  • Destructive
  • Inverse

Primary icon button

<button type="button" class="nj-icon-btn">
  <span class="nj-sr-only">Some accessible label</span>
  <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
</button>

<button type="button" class="nj-icon-btn" disabled>
  <span class="nj-sr-only">Some accessible label</span>
  <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
</button>

Secondary icon button

<button type="button" class="nj-icon-btn nj-icon-btn--secondary">
  <i class="nj-icon-btn__icon material-icons">close</i>
</button>

<button type="button" class="nj-icon-btn nj-icon-btn--secondary" disabled>
  <i class="nj-icon-btn__icon material-icons">close</i> 
</button>

Destructive icon button

<button type="button" class="nj-icon-btn nj-icon-btn--destructive">
  <span class="nj-sr-only">Some accessible label</span>
  <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
</button>

<button type="button" class="nj-icon-btn nj-icon-btn--destructive" disabled>
  <span class="nj-sr-only">Some accessible label</span>
  <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
</button>

Inverse icon button

Used on colored and dark backgrounds.

<div style="background-color: var(--nj-core-color-ultramarine-800); padding: var(--nj-semantic-size-spacing-16);">

<button type="button" class="nj-icon-btn nj-icon-btn--inverse">
  <span class="nj-sr-only">Some accessible label</span>
  <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
</button>

<button type="button" class="nj-icon-btn nj-icon-btn--inverse" disabled>
  <span class="nj-sr-only">Some accessible label</span>
  <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
</button>

</div>

Size variation

Icon button comes in 3 sizes:

  • small: 16x16 icon and 16x16 hover surface
  • medium: 16x16 icon and 24x24 hover surface
  • large: 24x24 icon and 32x32 hover surface

Use the following modifiers

  • .nj-icon-btn--sm
  • .nj-icon-btn--lg
<div class="mt-3 story-btn-row" style="display: flex; align-items: center; gap: 16px">

  <button type="button" class="nj-icon-btn nj-icon-btn--sm">
    <span class="nj-sr-only">Some accessible label</span>
    <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
  </button>

  <button type="button" class="nj-icon-btn">
    <span class="nj-sr-only">Some accessible label</span>
    <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
  </button>

  <button type="button" class="nj-icon-btn nj-icon-btn--lg">
    <span class="nj-sr-only">Some accessible label</span>
    <span aria-hidden="true" class="nj-icon-btn__icon material-icons">close</span>
  </button>

</div>