Skip to content
Indiana University Logo
Rivet Design System
  • Components Add-ons Content guide
  • What is Rivet? Blog Roadmap Changelog
  1. February 25, 2021

    Rivet 1.8.0 release

    Rivet 1.8.0 is now available. This release adds border removal utility classes and fixes bugs related to the button, dropdown, and collapsible components.

  2. February 15, 2021

    Rivet announcements: Beta timeline, GitHub Discussions, and 1.8.0 release

    Updates about Rivet's development in the spring and beyond.

  3. January 20, 2021

    Rivet featured on Accessible Code Libraries and Design Patterns list

    Rivet was highlighted alongside the U.S. government, GOV.UK, and Salesforce design systems.

More posts Get updates in your inbox
Install via NPM Download CSS & JS Hosted assets
Navigation
    • Components
    • Add-ons
    • Content guide
    • What is Rivet?
    • Blog
    • Roadmap
    • Changelog
  • Use Rivet
Resources
  • User Experience Office
  • Accessibility Evaluations
  • Rivet Software Design System
  • IU Framework for WCMS
Version 1.8.0
  • Information
    • Roadmap
    • Changelog
    • Component status
    • Contributing
  • Getting started
    • Install with NPM
    • Rivet Sass
  • Layout
    • Box
    • Grid
    • Panels
    • Spacing
    • Typography
  • Page content
    • Badges
    • Links
    • Lists
    • Media Object
    • Step Indicator
    • Tables
    • Tabs This component requires JS
    • Timeline
  • Forms
    • Buttons
    • Segmented Buttons
    • Checkboxes
    • File input This component requires JS
    • Input group
    • Radio buttons
    • Select element
    • Text inputs
  • Navigation
    • Breadcrumb
    • Dropdown This component requires JS
    • Footer
    • Header This component requires JS
    • Menu
    • Pagination
  • Overlays & Feedback
    • Alerts This component requires JS
    • Loading indicator
    • Modals This component requires JS
  • Utilities
    • Border
    • Display
    • Flex
    • Text
    • Visibility
    • Width
    • z-index
Ready Added in 1.0.0

Segmented Buttons

Use the segmented button to display a group of related controls in a single line. Combine them with the dropdown to create complex menu controls.

Segmented button examples

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

Secondary modifier

The segmented buttons can be used with any of Rivet’s button modifiers.

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

Accessibility notes

When using the segmented button, it’s important to apply the ARIA attribute role="group" to the <div> container. This conveys two things to assistive technologies (AT):

  • The buttons are related to one another
  • AT should announce that the buttons are part of a group

In addition to the ARIA group role, use the aria-label attribute to provide more information to AT. This is especially important if you are using more than one set of segmented buttons on a page.

As an alternative, you could also use an aria-labelledby attribute. Its value should correspond to the id of text that labels what the segmented button controls.See this article on associating related controls with WAI-ARIA for more information.

Fitted modifier

Adding the .rvt-button-segmented--fitted modifier to the segmented buttons’ <div> container will make the buttons fill the entire width of their parent container.

<div class="rvt-button-segmented rvt-button-segmented--fitted" role="group" aria-label="Fitted group">
    <button type="button" class="rvt-button rvt-button--secondary">Left</button>
    <button type="button" class="rvt-button rvt-button--secondary">Middle</button>
    <button type="button" class="rvt-button rvt-button--secondary">Right</button>
</div>

Using with anchor tags

It is possible to use segmented buttons with anchor tags if the situation calls for it (e.g., if you are using them as navigation elements that will take a user to a different URL). However, for most uses in modern web applications (e.g., triggering or toggling the visibility of content), the HTML <button> element is the appropriate choice.

See this article on Links vs. Buttons in modern web applications for more information.

Using segmented buttons with dropdowns

You can use the segmented button along with Rivet’s dropdown component to create more complex controls like in the example below. Here we are also using some padding utility classes to slightly decrease the width of the secondary action dropdown toggle.

Personal settings
<div class="rvt-button-segmented" role="group" aria-label="Dropdown group">
    <button type="button" class="rvt-button">Primary action</button>
    <div class="rvt-dropdown">
        <button type="button" class="rvt-button rvt-p-right-xs rvt-p-left-xs" data-dropdown-toggle="segmented-example">
            <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" id="segmented-example" role="menu" aria-hidden="true">
            <button type="button" role="menuitemradio">Notify all</button>
            <button type="button" role="menuitemradio" aria-checked="true">Notify admins</button>
            <button type="button" role="menuitemradio">Notify contributors</button>
            <div class="rvt-dropdown__menu-heading" aria-hidden="true">Personal settings</div>
            <div role="group" aria-label="Personal settings">
                <button type="button" role="menuitem">Profile Settings</button>
                <button type="button" role="menuitem">Logout</button>
            </div>
        </div>
    </div>
</div>

On this page

    • Segmented button examples
      • Secondary modifier
      • Accessibility notes
      • Fitted modifier
    • Using with anchor tags
    • Using segmented buttons with dropdowns
Have a question about Rivet?

We're happy to help! If you've found a bug, typo, or have a request, the best way to get in touch is to create an issue on Github.

For all other questions please feel free to email us at rivet@iu.edu

  • Accessibility
  • Privacy Notice
  • Copyright © The Trustees of Indiana University