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" fill="currentColor" viewBox="0 0 16 16">  <path d="M7 7V.5h2V7h6.5v2H9v6.5H7V9H.5V7H7Z"/></svg>
    <span>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" fill="currentColor" viewBox="0 0 16 16">  <path d="M11 0H0v11h3V9H2V2h7v1h2V0Z"/>  <path d="M16 5H5v11h11V5Zm-9 9V7h7v7H7Z"/></svg>
    <span>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" fill="currentColor" 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 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"/></svg>
    <span>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" fill="currentColor" 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"/></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>
Open in new window
Copy link to example 
<div class="rvt-button-segmented" role="group" aria-label="Primary controls">
  <button type="button" class="rvt-button">Primary one</button>
  <button type="button" class="rvt-button">Primary two</button>
  <button type="button" class="rvt-button">Primary three</button>
</div>
Open in new window
Copy link to example 
<div class="rvt-button-segmented" role="group" aria-label="Secondary controls">
  <button type="button" class="rvt-button rvt-button--secondary">Secondary one</button>
  <button type="button" class="rvt-button rvt-button--secondary">Secondary two</button>
  <button type="button" class="rvt-button rvt-button--secondary">Secondary three</button>
</div>
Open in new window
Copy link to example 
<div class="rvt-button-segmented rvt-button-segmented--fitted" role="group" aria-label="Primary controls">
  <button type="button" class="rvt-button rvt-button--secondary">Primary one</button>
  <button type="button" class="rvt-button rvt-button--secondary">Primary two</button>
  <button type="button" class="rvt-button rvt-button--secondary">Primary three</button>
</div>
Open in new window
Copy link to example 
<div class="rvt-button-segmented" role="group" aria-label="Dropdown group">
  <button type="button" class="rvt-button">
    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="M8 5h4v2H8V5Zm4 3H8v2h4V8Z"/>  <path d="M16 1H4v2H0v9a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V1ZM5.83 13c.11-.313.17-.65.17-1V3h8v9a1 1 0 0 1-1 1H5.83ZM2 12V5h2v7a1 1 0 1 1-2 0Z"/></svg>
    <span>Meeting Agenda.pdf</span></button>
  <div class="rvt-dropdown" data-rvt-dropdown>
    <button type="button" class="rvt-button rvt-p-right-xs rvt-p-left-xs" data-rvt-dropdown-toggle>
      <span class="rvt-sr-only">Toggle options menu</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="M8,12.46a2,2,0,0,1-1.52-.7L1.24,5.65a1,1,0,1,1,1.52-1.3L8,10.46l5.24-6.11a1,1,0,0,1,1.52,1.3L9.52,11.76A2,2,0,0,1,8,12.46Z"/>
      </svg>
    </button>
    <div class="rvt-dropdown__menu" data-rvt-dropdown-menu hidden>
      <button type="button" role="menuitemradio">Preview</button>
      <button type="button" role="menuitemradio">Open</button>
      <button type="button" role="menuitemradio">Save As...</button>
    </div>
  </div>
</div>

Elements #

Element Description Usage Required Multiple
Text Text that appears inside the button Limit to a few words. Aim for a verb-noun pair, such as Submit application

Text is required

Component may contain only one Text
Icon Icon that appears next to the button text Only use icons from the Rivet icon library. Put icons before the text, not after.

Icon is optional

Component may contain only one Icon

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

Do

  • 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
  • Use the .rvt-button-group CSS class to create equal space between buttons at the end of a form, such as "Submit" and "Cancel"
  • Use the segmented button to group a button with a dropdown menu

Don't

  • 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
  • Mix button colors or variants within a single segmented button
  • Use the segmented button to group buttons at the end of a form—use the button group instead

Accessibility #

  • Use a meaningful label for segmented buttons. Change the default value of the aria-label attribute to a label that clearly describes the buttons in the group. (Non-segmented button groups do not require a label attribute.)
  • 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.