Button

Highlight an action the user can take, such as submitting a form

Overview #

Use the button component to highlight important actions the user can take, such as submitting a form, starting an application process, updating a record, or initiating a workflow.

Examples #

Choose an example

Open in new window Copy link to example

<div class="rvt-button-group">
  <button class="rvt-button">Primary</button>
  <button class="rvt-button rvt-button--success">Success</button>
  <button class="rvt-button rvt-button--danger">Danger</button>
  <button class="rvt-button rvt-button--plain">Plain</button>
</div>

Open in new window Copy link to example

<div class="rvt-button-group">
  <button class="rvt-button rvt-button--secondary">Secondary</button>
  <button class="rvt-button rvt-button--success-secondary">Success</button>
  <button class="rvt-button rvt-button--danger-secondary">Danger</button>
</div>

Open in new window Copy link to example

<div class="rvt-button-group">
  <button class="rvt-button rvt-button--small">Primary</button>
  <button class="rvt-button rvt-button--success rvt-button--small">Success</button>
  <button class="rvt-button rvt-button--danger rvt-button--small">Danger</button>
  <button class="rvt-button rvt-button--plain rvt-button--small">Plain</button>
</div>

Open in new window Copy link to example

<button class="rvt-button rvt-button--full-width">Primary</button>
<button class="rvt-button rvt-button--success rvt-button--full-width">Success</button>
<button class="rvt-button rvt-button--danger rvt-button--full-width">Danger</button>
<button class="rvt-button rvt-button--plain rvt-button--full-width">Plain</button>

Open in new window Copy link to example

<div class="rvt-button-group">
  <button type="button" class="rvt-button">
    <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M7 7V.5h2V7h6.5v2H9v6.5H7V9H.5V7H7Z"></path></svg>
    <span class="rvt-m-left-xs">Add item</span>
  </button>
  <button type="button" class="rvt-button">
    <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M11 0H0v11h3V9H2V2h7v1h2V0Z"></path><path d="M16 5H5v11h11V5Zm-9 9V7h7v7H7Z"></path></svg>
    <span class="rvt-m-left-xs">Copy</span>
  </button>
  <button type="button" class="rvt-button rvt-button--danger">
    <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="m8 6.586-2-2L4.586 6l2 2-2 2L6 11.414l2-2 2 2L11.414 10l-2-2 2-2L10 4.586l-2 2Z"></path><path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z"></path></svg>
    <span class="rvt-m-left-xs">Delete</span>
  </button>
  <button type="button" class="rvt-button rvt-button--secondary">
    <span class="rvt-sr-only">Edit entry</span>
    <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M15.353 2.938 13.06.646a1.5 1.5 0 0 0-2.122 0L1 10.586v4.359h4.413l9.937-9.882a1.5 1.5 0 0 0 .003-2.125Zm-4.439.562L12 2.414l1.584 1.584-1.089 1.083-1.58-1.581ZM9.5 4.914l1.577 1.577-6.49 6.454H3v-1.53l6.5-6.5Z"></path></svg>
  </button>
</div>

Open in new window Copy link to example

<div class="rvt-button-group rvt-button-group--right">
  <button class="rvt-button">Primary</button>
  <button class="rvt-button rvt-button--success">Success</button>
  <button class="rvt-button rvt-button--danger">Danger</button>
  <button class="rvt-button rvt-button--plain">Plain</button>
</div>

Usage #

Group related buttons. When you need to display a group of buttons you can wrap them in a div with the .rvt-button-group CSS class added to it. The .rvt-button-group class will add an equal amount of margin to the right side of every button in the group except the last one. (Some code examples on this page use the button group, but you’re not required to do so if you’re only using a single button.)
Use the Rivet icon set. You can copy and paste icon SVG code from the Rivet icon set GitHub repo.
Put icons first. Icons should appear before text within a button.

Do

Keep button text concise
Use to highlight important actions the user can take
Use to open or close a dialog or dropdown menu
Use to hide or show drawer navigation on mobile
Use to submit form data

Don't

Put full sentences of text inside a button
Use to navigate the user to a new content page if a regular link would work just as well
Choose button colors for purely aesthetic reasons—use the color variant that matches the situation

Accessibility #

Hide button icons from screen readers. Add the aria-hidden="true" attribute to button icons. This communicates to screen readers that the icons are decorative and should not be read aloud.
Don’t rely on color or icons alone to convey meaning. The color or icon of a button is not enough to convey meaning to screen readers. A button’s meaning must be clear from its text. If additional text is needed to make a button’s meaning clear, especially if it reads “Learn more” or has no visible text at all, use the .rvt-sr-only utility class to add hidden text that’s communicated only to those using screen readers.