Icon button

coming soon

Example

Fluid provides four icon buttons:

  • Primary
  • Secondary
  • Destructive
  • Inverse

Primary icon button

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

<button type="button" class="nj-icon-btn" disabled>
  <i class="nj-icon-btn__icon material-icons">close</i>
</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">
  <i class="nj-icon-btn__icon material-icons">close</i>
</button>

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

Inverse icon button

Used on colored and dark backgrounds.

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

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

<button type="button" class="nj-icon-btn nj-icon-btn--inverse" disabled>
  <i class="nj-icon-btn__icon material-icons">close</i>
</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 style="display: flex; align-items: center; gap: 16px">

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

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

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

</div>