Button

Buttons allow users to interact with the product and trigger actions. They can be of different sizes, colors and status.
In terms of accessibility, be mindful of people using assistive technologies: don’t use links instead of buttons to trigger actions.

Example

Fluid provides four buttons:

  • Primary
  • Secondary
  • Destructive
  • Inverse

With three variations for a specific use each:

  • Bold
  • Subtle
  • Minimal

Primary button

<button type="button" class="nj-btn">Bold</button>

<button type="button" class="nj-btn nj-btn--subtle">Subtle</button>

<button type="button" class="nj-btn nj-btn--minimal">Minimal</button>

Secondary button

<button type="button" class="nj-btn nj-btn--secondary">Bold</button>

<button type="button" class="nj-btn nj-btn--secondary nj-btn--subtle">Subtle</button>

<button type="button" class="nj-btn nj-btn--secondary nj-btn--minimal">Minimal</button>

Destructive button

<button type="button" class="nj-btn nj-btn--destructive">Bold</button>

<button type="button" class="nj-btn nj-btn--destructive nj-btn--subtle">Subtle</button>

<button type="button" class="nj-btn nj-btn--destructive nj-btn--minimal">Minimal</button>

Inverse 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-btn nj-btn--inverse">Bold</button>

<button type="button" class="nj-btn nj-btn--inverse nj-btn--subtle">Subtle</button>

<button type="button" class="nj-btn nj-btn--inverse nj-btn--minimal">Minimal</button>

</div>

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

Size variation

Fancy larger or smaller buttons?

Use the following modifiers for additional sizes:

  • .nj-btn--xs,
  • .nj-btn--sm
  • .nj-btn--lg
<button type="button" class="nj-btn nj-btn--xs">Button XS</button>

<button type="button" class="nj-btn nj-btn--sm">Button SM</button>

<button type="button" class="nj-btn">Button normal</button>

<button type="button" class="nj-btn nj-btn--lg ">Button LG</button>

Button tags

The .nj-btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.

Link
<a class="nj-btn" href="#" role="button">Link</a>

<button class="nj-btn" type="submit">Button</button>

<input class="nj-btn" type="button" value="Input">

<input class="nj-btn" type="submit" value="Submit">

<input class="nj-btn" type="reset" value="Reset">

Buttons with text and icon

You can add an icon before the text.

<div class="my-3 story-btn-row">
  <button type="button" class="nj-btn">
    <i class="nj-btn__icon nj-btn__icon--before material-icons">get_app</i>
    Button
  </button>
  <button type="button" class="nj-btn nj-btn--subtle">
    <i class="nj-btn__icon nj-btn__icon--before material-icons">get_app</i>
    Button
  </button>
  <button type="button" class="nj-btn nj-btn--minimal">
    <i class="nj-btn__icon nj-btn__icon--before material-icons">get_app</i>
    Button
  </button>
</div>
<div class="my-3 story-btn-row">
  <button type="button" class="nj-btn nj-btn--secondary">
    <i class="nj-btn__icon nj-btn__icon--before material-icons">get_app</i>
    Button
  </button>
  <button type="button" class="nj-btn nj-btn--secondary nj-btn--subtle">
    <i class="nj-btn__icon nj-btn__icon--before material-icons">get_app</i>
    Button
  </button>
  <button type="button" class="nj-btn nj-btn--secondary nj-btn--minimal">
    <i class="nj-btn__icon nj-btn__icon--before material-icons">get_app</i>
    Button
  </button>
</div>
<div class="my-3 story-btn-row">
  <button type="button" class="nj-btn nj-btn--destructive">
    <i class="nj-btn__icon nj-btn__icon--before material-icons">get_app</i>
    Button
  </button>
  <button type="button" class="nj-btn nj-btn--destructive nj-btn--subtle">
    <i class="nj-btn__icon nj-btn__icon--before material-icons">get_app</i>
    Button
  </button>
  <button type="button" class="nj-btn nj-btn--destructive nj-btn--minimal">
    <i class="nj-btn__icon nj-btn__icon--before material-icons">get_app</i>
    Button
  </button>
</div>
<div class="my-3" style="background-color: var(--nj-color-palette-ultramarine-800)">
  <div class="p-2 story-btn-row">
    <button type="button" class="nj-btn nj-btn--inverse">
      <i class="nj-btn__icon nj-btn__icon--before material-icons">get_app</i>
      Button
    </button>
    <button type="button" class="nj-btn nj-btn--inverse nj-btn--subtle">
      <i class="nj-btn__icon nj-btn__icon--before material-icons">get_app</i>
      Button
    </button>
    <button type="button" class="nj-btn nj-btn--inverse nj-btn--minimal">
      <i class="nj-btn__icon nj-btn__icon--before material-icons">get_app</i>
      Button
    </button>
  </div>
</div>

Buttons with only one icon

<div class="my-3 story-btn-row">
  <button type="button" class="nj-btn">
    <i class="nj-btn__icon nj-btn__icon--before material-icons">get_app</i>
  </button>
  <button type="button" class="nj-btn nj-btn--subtle">
    <i class="nj-btn__icon nj-btn__icon--before material-icons">get_app</i>
  </button>
  <button type="button" class="nj-btn nj-btn--minimal">
    <i class="nj-btn__icon nj-btn__icon--before material-icons">get_app</i>
  </button>
</div>
<div class="my-3 story-btn-row">
  <button type="button" class="nj-btn nj-btn--secondary">
    <i class="nj-btn__icon nj-btn__icon--before material-icons">get_app</i>
  </button>
  <button type="button" class="nj-btn nj-btn--secondary nj-btn--subtle">
    <i class="nj-btn__icon nj-btn__icon--before material-icons">get_app</i>
  </button>
  <button type="button" class="nj-btn nj-btn--secondary nj-btn--minimal">
    <i class="nj-btn__icon nj-btn__icon--before material-icons">get_app</i>
  </button>
</div>
<div class="my-3 story-btn-row">
  <button type="button" class="nj-btn nj-btn--destructive">
    <i class="nj-btn__icon nj-btn__icon--before material-icons">get_app</i>
  </button>
  <button type="button" class="nj-btn nj-btn--destructive nj-btn--subtle">
    <i class="nj-btn__icon nj-btn__icon--before material-icons">get_app</i>
  </button>
  <button type="button" class="nj-btn nj-btn--destructive nj-btn--minimal">
    <i class="nj-btn__icon nj-btn__icon--before material-icons">get_app</i>
  </button>
</div>
<div class="my-3" style="background-color: var(--nj-color-palette-ultramarine-800)">
  <div class="p-2 story-btn-row">
    <button type="button" class="nj-btn nj-btn--inverse">
      <i class="nj-btn__icon nj-btn__icon--before material-icons">get_app</i>
    </button>
    <button type="button" class="nj-btn nj-btn--inverse nj-btn--subtle">
      <i class="nj-btn__icon nj-btn__icon--before material-icons">get_app</i>
    </button>
    <button type="button" class="nj-btn nj-btn--inverse nj-btn--minimal">
      <i class="nj-btn__icon nj-btn__icon--before material-icons">get_app</i>
    </button>
  </div>
</div>

Active state

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. There’s no need to add a class to <button>s as they use a pseudo-class. However, you can still force the same active appearance with .active (and include the aria-pressed="true" attribute) should you need to replicate the state programmatically.

<a href="#" class="nj-btn active" role="button" aria-pressed="true">Primary active bold</a>

<a href="#" class="nj-btn nj-btn--secondary active" role="button" aria-pressed="true">Secondary active bold</a>

<a href="#" class="nj-btn nj-btn--destructive active" role="button" aria-pressed="true">Destructive active bold</a>

<div class="p-2" style="background-color: var(--nj-color-palette-ultramarine-800)">
  <a href="#" class="nj-btn nj-btn--inverse active" role="button" aria-pressed="true">Inverse active bold</a>
</div>

Disabled state

Make buttons look inactive by adding the disabled boolean attribute to any <button> element.

Primary

Secondary

Destructive

Inverse

<h4>Primary</h4>
<div class="story-btn-row">
<button type="button" class="nj-btn" disabled>Button</button>

<button type="button" class="nj-btn nj-btn--subtle" disabled>Button</button>

<button type="button" class="nj-btn nj-btn--minimal" disabled>Button</button>

</div>
<h4 class="mt-3">Secondary</h4>
<div class="mt-3 story-btn-row">

<button type="button" class="nj-btn nj-btn--secondary" disabled>Button</button>

<button type="button" class="nj-btn nj-btn--secondary nj-btn--subtle" disabled>Button</button>

<button type="button" class="nj-btn nj-btn--secondary nj-btn--minimal" disabled>Button</button>
</div>
<h4 class="mt-3">Destructive</h4>
<div class="mt-3 story-btn-row">

<button type="button" class="nj-btn nj-btn--destructive" disabled>Button</button>

<button type="button" class="nj-btn nj-btn--destructive nj-btn--subtle" disabled>Button</button>

<button type="button" class="nj-btn nj-btn--destructive nj-btn--minimal" disabled>Button</button>
</div>
<div style="background-color: var(--nj-color-palette-ultramarine-800)">
  <h4 class="mt-3 p-2" style="color: var(--nj-color-text-inverse)">Inverse</h4>
  <div class="p-2 story-btn-row" >

    <button type="button" class="nj-btn nj-btn--inverse" disabled>Button</button>

    <button type="button" class="nj-btn nj-btn--inverse nj-btn--subtle" disabled>Button</button>

    <button type="button" class="nj-btn nj-btn--inverse nj-btn--minimal" disabled>Button</button>

  </div>
</div>

Disabled buttons using the <a> element behave a bit different:

  • <a>s don’t support the disabled attribute, so you must add the .disabled class to make it visually appear disabled.
  • Some future-friendly styles are included to disable all pointer-events on anchor buttons. In browsers which support that property, you won’t see the disabled cursor at all.
  • Disabled buttons should include the aria-disabled="true" attribute to indicate the state of the element to assistive technologies.
<a href="#" role="button" aria-disabled="true" class="nj-btn disabled">Button link</a>

The .disabled class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized. In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a tabindex="-1" attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.