Skip to main content
Rivet Design System Indiana University

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 #


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 aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
      <path fill="currentColor" d="M14,7H9V2A1,1,0,0,0,7,2V7H2A1,1,0,0,0,2,9H7v5a1,1,0,0,0,2,0V9h5a1,1,0,0,0,0-2Z"/>
    </svg>
    <span class="rvt-m-left-xs">Add item</span>
  </button>
  <button type="button" class="rvt-button">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
      <g fill="currentColor">
        <path d="M4,10.23H1.92V2H8V3h2V2A2,2,0,0,0,8,0H1.92a2,2,0,0,0-2,2v8.23a2,2,0,0,0,2,2H4Z"/>
        <path d="M14,16H8a2,2,0,0,1-2-2V7A2,2,0,0,1,8,5h6a2,2,0,0,1,2,2v7A2,2,0,0,1,14,16ZM8,7v7h6V7Z"/>
      </g>
    </svg>
    <span class="rvt-m-left-xs">Copy</span>
  </button>
  <button type="button" class="rvt-button rvt-button--danger">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
      <g fill="currentColor">
        <path d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM8,14a6,6,0,1,1,6-6A6,6,0,0,1,8,14Z"/>
        <path d="M10.83,5.17a1,1,0,0,0-1.41,0L8,6.59,6.59,5.17A1,1,0,0,0,5.17,6.59L6.59,8,5.17,9.41a1,1,0,1,0,1.41,1.41L8,9.41l1.41,1.41a1,1,0,0,0,1.41-1.41L9.41,8l1.41-1.41A1,1,0,0,0,10.83,5.17Z"/>
      </g>
    </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 aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
      <path fill="currentColor" d="M14.62,4.19,11.74,1.34a1.1,1.1,0,0,0-1.55,0L0,11.62,0,16l4.45,0L14.64,5.73A1.1,1.1,0,0,0,14.62,4.19ZM3.62,14H2V12.44l6-6L9.58,8ZM11,6.57,9.4,5,11,3.4,12.57,5Z"/>
    </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.