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.

Angular

React

Vanilla

Figma

Last updated v5.0.0

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-core-color-ultramarine-800); padding: var(--nj-semantic-size-spacing-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 .nj-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,
.nj-btn--xl

<button type="button" class="nj-btn nj-btn--xs">Button extra-small</button>

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

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

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

<button type="button" class="nj-btn nj-btn--xl ">Button extra-large</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">
    <span aria-hidden="true" class="nj-btn__icon nj-btn__icon--before material-icons">get_app</span>
    Button
  </button>
  <button type="button" class="nj-btn nj-btn--subtle">
    <span aria-hidden="true" class="nj-btn__icon nj-btn__icon--before material-icons">get_app</span>
    Button
  </button>
  <button type="button" class="nj-btn nj-btn--minimal">
    <span aria-hidden="true" class="nj-btn__icon nj-btn__icon--before material-icons">get_app</span>
    Button
  </button>
</div>
<div class="my-3 story-btn-row">
  <button type="button" class="nj-btn nj-btn--secondary">
    <span aria-hidden="true" class="nj-btn__icon nj-btn__icon--before material-icons">get_app</span>
    Button
  </button>
  <button type="button" class="nj-btn nj-btn--secondary nj-btn--subtle">
    <span aria-hidden="true" class="nj-btn__icon nj-btn__icon--before material-icons">get_app</span>
    Button
  </button>
  <button type="button" class="nj-btn nj-btn--secondary nj-btn--minimal">
    <span aria-hidden="true" class="nj-btn__icon nj-btn__icon--before material-icons">get_app</span>
    Button
  </button>
</div>
<div class="my-3 story-btn-row">
  <button type="button" class="nj-btn nj-btn--destructive">
    <span aria-hidden="true" class="nj-btn__icon nj-btn__icon--before material-icons">get_app</span>
    Button
  </button>
  <button type="button" class="nj-btn nj-btn--destructive nj-btn--subtle">
    <span aria-hidden="true" class="nj-btn__icon nj-btn__icon--before material-icons">get_app</span>
    Button
  </button>
  <button type="button" class="nj-btn nj-btn--destructive nj-btn--minimal">
    <span aria-hidden="true" class="nj-btn__icon nj-btn__icon--before material-icons">get_app</span>
    Button
  </button>
</div>
<div class="my-3" style="background-color: var(--nj-core-color-ultramarine-800)">
  <div class="p-2 story-btn-row">
    <button type="button" class="nj-btn nj-btn--inverse">
      <span aria-hidden="true" class="nj-btn__icon nj-btn__icon--before material-icons">get_app</span>
      Button
    </button>
    <button type="button" class="nj-btn nj-btn--inverse nj-btn--subtle">
      <span aria-hidden="true" class="nj-btn__icon nj-btn__icon--before material-icons">get_app</span>
      Button
    </button>
    <button type="button" class="nj-btn nj-btn--inverse nj-btn--minimal">
      <span aria-hidden="true" class="nj-btn__icon nj-btn__icon--before material-icons">get_app</span>
      Button
    </button>
  </div>
</div>

Buttons with only one icon

<div class="my-3 story-btn-row">
  <button type="button" class="nj-btn">
    <span aria-hidden="true" class="nj-btn__icon nj-btn__icon--before material-icons">get_app</span>
  </button>
  <button type="button" class="nj-btn nj-btn--subtle">
    <span aria-hidden="true" class="nj-btn__icon nj-btn__icon--before material-icons">get_app</span>
  </button>
  <button type="button" class="nj-btn nj-btn--minimal">
    <span aria-hidden="true" class="nj-btn__icon nj-btn__icon--before material-icons">get_app</span>
  </button>
</div>
<div class="my-3 story-btn-row">
  <button type="button" class="nj-btn nj-btn--secondary">
    <span aria-hidden="true" class="nj-btn__icon nj-btn__icon--before material-icons">get_app</span>
  </button>
  <button type="button" class="nj-btn nj-btn--secondary nj-btn--subtle">
    <span aria-hidden="true" class="nj-btn__icon nj-btn__icon--before material-icons">get_app</span>
  </button>
  <button type="button" class="nj-btn nj-btn--secondary nj-btn--minimal">
    <span aria-hidden="true" class="nj-btn__icon nj-btn__icon--before material-icons">get_app</span>
  </button>
</div>
<div class="my-3 story-btn-row">
  <button type="button" class="nj-btn nj-btn--destructive">
    <span aria-hidden="true" class="nj-btn__icon nj-btn__icon--before material-icons">get_app</span>
  </button>
  <button type="button" class="nj-btn nj-btn--destructive nj-btn--subtle">
    <span aria-hidden="true" class="nj-btn__icon nj-btn__icon--before material-icons">get_app</span>
  </button>
  <button type="button" class="nj-btn nj-btn--destructive nj-btn--minimal">
    <span aria-hidden="true" class="nj-btn__icon nj-btn__icon--before material-icons">get_app</span>
  </button>
</div>
<div class="my-3" style="background-color: var(--nj-core-color-ultramarine-800)">
  <div class="p-2 story-btn-row">
    <button type="button" class="nj-btn nj-btn--inverse">
      <span aria-hidden="true" class="nj-btn__icon nj-btn__icon--before material-icons">get_app</span>
    </button>
    <button type="button" class="nj-btn nj-btn--inverse nj-btn--subtle">
      <span aria-hidden="true" class="nj-btn__icon nj-btn__icon--before material-icons">get_app</span>
    </button>
    <button type="button" class="nj-btn nj-btn--inverse nj-btn--minimal">
      <span aria-hidden="true" class="nj-btn__icon nj-btn__icon--before material-icons">get_app</span>
    </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 buttons 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.

Primary active bold Secondary active bold Destructive active bold

Inverse active bold

<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-core-color-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-core-color-ultramarine-800)">
  <h4 class="mt-3 p-2" style="color: var(--nj-semantic-color-text-neutral-inverse-default)">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:

as 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.

Button link

<a href="#" role="button" aria-disabled="true" class="nj-btn disabled">Button link</a>

Link functionality caveat

The .disabled class uses pointer-events: none to try to disable the link functionality of as, 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.

Breadcrumb

Card