Icon button

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

We are undergoing a migration, the following examples might not be up-to-date.

Please refer directly to the Storybook documentation based on your preferred framework.

Storybook documentations

Angular

React

Vanilla

Figma

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>

Icon

Inline-message