<div class="mdc-segmented-button" role="group">
  <button class="mdc-segmented-button__segment" aria-pressed="false">
    <i class="material-icons mdc-segmented-button__icon">favorite</i>
  </button>
  <button class="mdc-segmented-button__segment" aria-pressed="false">
    <div class="mdc-segmented-button__label">Sample Text</div>
  </button>
  <button class="mdc-segmented-button__segment" aria-pressed="false">
    <i class="material-icons mdc-segmented-button__icon">favorite</i>
    <div class="mdc-segmented-button__label">Sample Text</div>
  </button>
</div>

Styles

@use '@material/ripple/common';
@use '@material/segmented-button/styles';

JavaScript Instantiation

import {MDCSegmentedButton} from '@material/segmented-button';
const segmentedButtonEl = document.querySelector('.mdc-segmented-button');
const segmentedButton = new MDCSegmentedButton(segmentedButtonEl);

See Importing the JS component for more information on how to import JavaScript.

The MDC Segmented Button component automatically instantiates the child MDC Segmented Button Segment components.

Icons

We recommend using Material Icons from Google Fonts:

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

However, you can also use SVG, FontAwesome, or any other icon library you wish.

Segmented Button

Multi select

By default, the segmented button allows any number of segments to be selected at a time so that each segment is independent from the rest.

For accessibility, the segments are treated as toggle buttons. The segmented button is assigned role="group" and each segment has the attribute aria-pressed with a boolean value corresponding to its selected state.

<div class="mdc-segmented-button" role="group">
  <button class="mdc-segmented-button__segment" aria-pressed="false">
    <i class="material-icons mdc-segmented-button__icon">favorite</i>
  </button>
  <button class="mdc-segmented-button__segment" aria-pressed="false">
    <div class="mdc-segmented-button__label">Sample Text</div>
  </button>
  <button class="mdc-segmented-button__segment" aria-pressed="false">
    <i class="material-icons mdc-segmented-button__icon">favorite</i>
    <div class="mdc-segmented-button__label">Sample Text</div>
  </button>
</div>

Single select

The segmented button can be limited to select only one segment at a time. In this case, the selected segment cannot be unselected with a click. Selecting a different segment will unselect the previously selected segment. To make the segmented button single select, add the class mdc-segmented-button--single-select.

For accessibility, the segments are treated as radio buttons. The segmented button is assigned role="radiogroup" and each segment is assigned role="radio" and has the attribute aria-checked with a boolean value corresponding to its selected state.

<div class="mdc-segmented-button mdc-segmented-button--single-select" role="radiogroup">
  <button class="mdc-segmented-button__segment" role="radio" aria-checked="false">
    <i class="material-icons mdc-segmented-button__icon">favorite</i>
  </button>
  <button class="mdc-segmented-button__segment" role="radio" aria-checked="false">
    <div class="mdc-segmented-button__label">Sample Text</div>
  </button>
  <button class="mdc-segmented-button__segment" role="radio" aria-checked="false">
    <i class="material-icons mdc-segmented-button__icon">favorite</i>
    <div class="mdc-segmented-button__label">Sample Text</div>
  </button>
</div>

Segment

The segment is assumed to be a child of a segmented button. The segment can be in a selected or unselected state and changes state if the button is clicked or if the segmented button tells it to change its state. If the parent segmented button is single select and the segment is selected, the segment will not become unselected if it is clicked.

The segment can contain an icon, text, or both. If both an icon and text are used, the icon is assumed to come first (unless the page is loaded as rtl). Ripple effects and touch support can also be added.

Segment with text

To insert text inside of a segment, add the class mdc-segmented-button__label.

<button class="mdc-segmented-button__segment">
  <div class="mdc-segmented-button__label">Sample Text</div>
</button>

Segment with an icon

To insert an icon inside of a segment, add the class mdc-segmented-button__icon.

<button class="mdc-segmented-button__segment">
  <i class="material-icons mdc-segmented-button__icon">favorite</i>
</button>

Selected segment

The segment will remain in a visually toggled state while selected. To select the segment by default, add the class mdc-segmented-button__segment--selected and set the attribute aria-pressed or aria-checked (if the segmented button is multi or single select, respectively) to true.

<button class="mdc-segmented-button__segment mdc-segmented-button__segment--selected" aria-pressed="true">
  <div class="mdc-segmented-button__label">Sample Text</div>
</button>

Additional Information

Touch accessibility

Material Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your segments:

<div class="mdc-touch-target-wrapper">
  <button class="mdc-segmented-button__segment mdc-segmented-button--touch">
    <div class="mdc-segmented-button__touch"></div>
    <div class="mdc-segmented-button__label">Sample Text</div>
  </button>
</div>

Ripple

To include ripple effects when a segment is clicked add the following classes to the segment:

<button class="mdc-segmented-button__segment">
  <div class="mdc-segmented-button__ripple"></div>
  <div class="mdc-segmented-button__label">Sample Text</div>
</button>

Each segment within the segmented button is a tabbable element. Arrow key navigation between segments is not supported at this time.

Style Customization

CSS Classes

CSS Class	Description
`mdc-segmented-button`	Mandatory. Indicates the wrapper for child segments.
`mdc-segmented-button__single-select`	Optional. Indicates the segmented button only allows one segment to be selected at a time.
`mdc-segmented-button__segment`	Mandatory. Indicates a button element that can be selected.
`mdc-segmented-button__icon`	Optional. Indicates an icon in the segment. We recommend using Material Icons from Google Fonts.
`mdc-segmented-button__label`	Optional. Indicates text in the segment.
`mdc-segmented-button__segment--selected`	Optional. Indicates that the segment is selected.
`mdc-touch-target-wrapper`	Optional. Indicates contained segment has touch target support.
`mdc-segmented-button--touch`	Optional. Indicates the segment has touch target support.
`mdc-segmented-button__touch`	Optional. Indicates the segment has touch target support.
`mdc-segmented-button__ripple`	Optional. Indicates the segment has a ripple effect when clicked.

NOTE: Every segment element must contain an icon with class mdc-segmented-button__icon, text with class mdc-segmented-button__label, or both.

NOTE: While mdc-touch-target-wrapper, mdc-segmented-button--touch, and mdc-segmented-button__touch are optional, if one is used then all three must be used.

Sass Mixins

Mixin	Description
`outline-color`	Customizes the border color around each segment.
`unselected-ink-color`	Customizes the text and icon ink color for an unselected segment.
`unselected-container-fill-color`	Customizes the background color for an unselected segment.
`selected-ink-color`	Customizes the text and icon ink color for a selected segment.
`selected-container-fill-color`	Customizes the background color for an selected segment.

`MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods

The MDC Segmented Button package is composed of two JavaScript classes:

MDCSegmentedButton defines the behavior of a set of segments.
MDCSegmentedButtonSegment defines the behavior of a single segment.

To use the MDCSegmentedButton and MDCSegmentedButtonSegment classes, import both from @material/segmented-button.

`SegmentDetail`

The SegmentDetail type contains only the actionable information about a specific MDCSegmentedButtonSegment.

Property	Value Type	Description
`index`	`number`	The index of the segment.
`selected`	`boolean`	The segment's selected state.
`segmentId?`	`string \| undefined`	The segment's segmentId, if provided.

`MDCSegmentedButton`

Method Signature	Description
`getSelectedSegments() => readonly SegmentDetail[]`	Proxies to foundation's `getSelectedSegments` method.
`selectSegment(indexOrSegmentId: number \| string) => void`	Proxies to foundation's `selectSegment` method.
`unselectSegment(indexOrSegmentId: number \| string) => void`	Proxies to foundation's `unselectSegment` method.
`isSegmentSelected(indexOrSegmentId: number \| string) => boolean`	Proxies to foundation's `isSegmentSelected` method.

Property	Value Type	Description
`segments`	`ReadOnlyArray<MDCSegmentedButtonSegment>`	Array of child `MDCSegmentedButtonSegment`s.
`ripple`	`MDCRipple` (read-only)	The `MDCRipple` instance for the root element that `MDCSegmentedButton` initializes.

Events

Event Name	`event.detail`	Description
MDCSegmentedButton:change	`SegmentDetail`	Indicates that a segment's selected value may have changed due to a click.

`MDCSegmentedButtonSegment`

Method Signature	Description
`setIndex(index: number) => void`	Sets segment's index.
`setIsSingleSelect(isSingleSelect: boolean) => void`	Sets segment's isSingleSelect.
`isSelected() => boolean`	Proxies to foundation's `isSelected` method.
`setSelected() => void`	Proxies to foundation's `setSelected` method.
`setUnselected() => void`	Proxies to foundation's `setUnselected` method.
`getSegmentId() => string \| undefined`	Proxies to foundation's `getSegmentId` method.

Events

Event Name	`event.detail`	Description
`MDCSegmentedButtonSegment:selected`	`SegmentDetail`	Indicates the segment's selected status just changed due to a click.

Usage within Web Frameworks

If you are using a JavaScript framework, such as React or Angular, you can create Segmented Buttons for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.

Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`

See segmented-button/component.ts and segment/component.ts for vanilla DOM implementations of these adapter APIs for reference.

`MDCSegmentedButtonAdapter`

Method Signature	Description
`hasClass(className: string) => boolean`	Returns true if segmented button has className, otherwise returns false.
`getSegments() => readonly SegmentDetail[]`	Returns child segments represented as a readonly list of SegmentDetails.
`selectSegment(indexOrSegmentId: number \| string) => void`	Sets identified segment to be selected.
`unselectSegment(indexOrSegmentId: number \| string) => void`	Set identified segment to be not selected.
`notifySelectedChange(detail: SegmentDetail) => void`	Notifies the client about the changed segment with a `change` event.

NOTE: notifySelectedChange must pass along a SegmentDetail representing the potentially changed Segment, and must be observable by the client (e.g. via DOM event bubbling).

`MDCSegmentedButtonSegmentAdapter`

Method Signature	Description
`isSingleSelect() => boolean`	Returns true if wrapping segmented button is single select, otherwise returns false.
`getAttr(attrName: string) => string \| null`	Returns root element's attribute if it is set, otherwise returns null.
`setAttr(attrName: string, value: string) => void`	Sets root element's attribute value to `value`.
`addClass(className: string) => void`	Adds class to the root element.
`removeClass(className: string) => void`	Removes class from the root element.
`hasClass(className: string) => boolean`	Returns true if root element has class, otherwise returns false.
`notifySelectedChange(selected: boolean) => void`	Notifies the Segmented Button that the segment's selected state has changed.

NOTE: notifySelectedChange must pass along a SegmentDetail representing the Segment, and must be observable by the mdc-segmented-button element (e.g. via DOM event bubbling).

Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`

`MDCSegmentedButtonFoundation`

Method Signature	Description
`selectSegment(indexOrSegmentId: number \| string) => void`	Sets identified segment to be selected.
`unselectSegment(indexOrSegmentId: number \| string) => void`	Set identified segment to be not selected.
`getSelectedSegments() => readonly SegmentDetail[]`	Returns selected segments as readonly list of SegmentDetails.
`isSegmentSelected(indexOrSegmentId: number \| string) => boolean`	Returns true if identified segment is selected, otherwise returns false.
`isSingleSelect() => boolean`	Returns true if segmented button is single select, otherwise returns false.
`handleSelected(detail: SegmentDetail) => void`	Handles a `selected` event. Maintains single select restrictions, if applicable, and notifies client.

`MDCSegmentedButtonFoundation` Event Handlers

When wrapping the Segmented Button foundation, the following events must be bound to the indicated foundation methods:

Events	Element Selector	Foundation Handler
`MDCSegmentedButtonSegment:selected`	`.mdc-segmented-button` (root)	`handleSelected`

`MDCSegmentedButtonSegmentFoundation`

Method Signature	Description
`isSelected() => void`	Returns true if segment is currently selected.
`setSelected() => void`	Sets segment to be selected.
`setUnselected() => void`	Sets segment to be not selected.
`getSegmentId() => string \| undefined`	Returns segment's segmentId if it was provided, otherwise return undefined.
`handleClick() => void`	Handles a `click` event. Changes selected state if able (due to single select) and notifies Segmented Button.

`MDCSegmentedButtonSegmentFoundation` Event Handlers

When wrapping the Segment foundation, the following events must be bound to the indicated foundation methods:

Events	Element Selector	Foundation Handler
`click`	`.mdc-segmented-button__segment` (root)	`handleClick`

14.0.0 (2022-04-27)

Bug Fixes

button: update HCM shim to use the existing focus-ring (a657abb)
checkbox: Add explicit system color for checkmark in HCM. (8c4da22)
checkbox: move forced-colors theme out of static styles (bbd1126)
checkbox: Update checkbox theme styles mixin to accept css vars (c14e977)
chips: Fix typography selector in GMDC-Wiz chips theming (43c7d87)
datatable: Adjust data table last row border-radius to support setting row background-color. (ba78e87)
dialog: Render dividers in Firefox 94 on Windows HCM (fae6c65)
dialog: Set default z-index for close button in FloatingSheet dialog. (3366a71)
fab: Add focus ring in HCM. (d57ec74)
focus-ring: add 2d padding customizability, RTL bugfix (f81fb1d)
focus-ring: box-sizing bugfix to content-box. If box-sizing border-box is inherited the ring spacing will collapse. (e58552c)
focus-ring: ignore pointer events (3ef470e)
focus-ring: RTL bugfix (e00181e)
iconbutton: Fixed max width and height for high contrast mode focus ring on icon buttons. Display only in forced colors mode. (cf42927)
iconbutton: Set icon button ripple z-index to -1. (586e740)
list: Improve a11y for multi-select lists (9736ddc)
list: Remove conflicting validation for checkbox list in setEnabled (353ca7e)
list: Update lastSelectedIndex when toggling a checkbox range (dcba26f)
menusurface: Add a getOwnerDocument() method to MDCMenuSurfaceAdapter to provide a reference to the document that owns the menu surface DOM element. (3486659)
radio: Fix disabled state in Firefox Windows high contrast mode (23043ac)
radio: Modify theme styles Sass mixin validation to validate only keys (390220e)
select: Add border to select menu in HCM. (5d80969)
select: revert down/up arrow on anchor changing selected index (43d08ba)
slider: Fix bug where secondary click moves slider thumb. (3ab9565)
slider: Fix IE11 bug - unset is unsupported in IE. (f460e23)
slider: In updateUI, fix behavior to match jsdoc claim that when thumb param is undefined it updates both thumbs. Input attributes were not being updated at all. (cc4ed13)
slider: Make the slider errors easier to debug by providing all relevant values in the error message. (8687937)
snackbar: address Trusted Types violation (cbd9358)
tooltip: Adjusts logic in validateTooltipWithCaretDistances method. (3e30054)
typography: Fixes typography theme-styles mixin... the value being retreived from the $theme map and css property name was swapped. The mixin would request font-size/font-weight/letter-spacing from the $theme map (which expects size/weight/tracking)... so these values would always be null. (32b3913)
Remove /** @override */ tags from TypeScript code. (c3cdff0)
Simplify MDCAttachable interface to be any object (Function) that has attachTo. (05db65e)
Snackbar action button ripple color is applied to the ripple element. (4e66fb2)
Work around bug in Sass (037285f), closes sass/sass#3259
switch: Restore Firefox 94 HCM outlines (39cf14b)
textfield: Fix breaking tests due to no valid pointerId being associated with pointer events. (15db4f1)
tooltip: Only sends notification of a tooltip being hidden if showTimeout is not set (indicating that this tooltip is about to be re-shown). (6ca8b8f)

Features

banner: Add disableAutoClose params for both banner actions to prevent the banner buttons from automatically closing the banner. Add adapter #notifyActionClicked method. (b094eaa)
chips: add focus ring styles (783f6fd)
chips: Added elevation tint layer color support in chips (c78ff04)
data-table: separate table structure into its own mixin (9f9d928)
dialog: Add styling for floating sheets (78305b6)
dialog: Add styling for floating sheets with content padding (3e20c1d)
Dialog: Adds an API to hide the header for GMDC Fullscreen Dialog in non-fullscreen mode (ab4aba1)
Dialog: Adds an API to set custom position for GMDC Dialog (ea9b5b4)
Dialog: Adds an API to set custom z-index for GMDC Dialog (96ea061)
focus-ring: added a new mixin so we can override just the focus-ring color (641ed08)
focus-ring: added a new mixin so we can override just the focus-ring radius (7321d62)
iconbutton: Add link icon button Sass. (9803d2d)
mdc-list: introduce selection change event (7d8ea46)
menu: allow preferentially opening surface below anchor (261f2db)
MenuSurface: Add opening event for menus. (53b3cad)
select: Add theming mixin boilerplate code to select (ae8a6a3)
select: Add validation getter methods. (bdf1d37)
select: Added theme mixins to MDC select (dcfe49c)
slider: Add minRange param to range sliders to request a minimum gap between the two thumbs. (8fffcb5)
slider: Add an option to hide focus styles after pointer interaction. (ec54d90)
slider: Keep the slider value indicator within the bounds of the slider if possible. (c047f7c)
state: make context aware (b2fe352)
switch: Add high contrast mode focus ring to switch (f31a833)
text-field: Add theming mixin boilerplate code to text-field (eb382f3)
text-field: Added theme mixins to MDC text field (344d528)
textfield: adding input-font-size mixin (207230e)
theme: allow custom property strings in theme.validate-theme() (4e372fb)
add new class and mixin for open state of a menu item (9a02b6e)
Indicate which thumb valueToAriaValueTextFn and valueToValueIndicatorTextFn functions are called for. (b6510c8)
textfield: adding input-font-family mixin (991fb99)
Describe how to add child lists into a list item. (758ce31)

BREAKING CHANGES

MenuSurface: Adds #notifyOpening method to menu surface adapter.

PiperOrigin-RevId: 444830518

slider: Adds #getValueIndicatorContainerWidth method to slider adapter.

PiperOrigin-RevId: 419837612

Keywords

FAQs

What is @material/segmented-button?

Is @material/segmented-button popular?

Is @material/segmented-button well maintained?

Package last updated on 28 Apr 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@material/segmented-button

Segmented Buttons

Using segmented buttons

Installation

Basic Usage

HTML Structure

Styles

JavaScript Instantiation

Icons

Segmented Button

Multi select

Single select

Segment

Segment with text

Segment with an icon

Selected segment

Additional Information

Touch accessibility

Ripple

Keyboard navigation

Style Customization

CSS Classes

Sass Mixins

MDCSegmentedButton, MDCSegmentedButtonSegment, and SegmentDetail Properties and Methods

SegmentDetail

MDCSegmentedButton

Events

MDCSegmentedButtonSegment

Events

Usage within Web Frameworks

Adapters: MDCSegmentedButtonAdapter and MDCSegmentedButtonSegmentAdapter

MDCSegmentedButtonAdapter

MDCSegmentedButtonSegmentAdapter

Foundations: MDCSegmentedButtonFoundation and MDCSegmentedButtonSegmentFoundation

MDCSegmentedButtonFoundation

MDCSegmentedButtonFoundation Event Handlers

MDCSegmentedButtonSegmentFoundation

MDCSegmentedButtonSegmentFoundation Event Handlers

14.0.0 (2022-04-27)

Bug Fixes

Features

BREAKING CHANGES

Keywords

Related posts

Threat Actor Exposes Playbook for Exploiting npm to Build Blockchain-Powered Botnets

NVD Backlog Tops 20,000 CVEs Awaiting Analysis as NIST Prepares System Updates

`MDCSegmentedButton`, `MDCSegmentedButtonSegment`, and `SegmentDetail` Properties and Methods

`SegmentDetail`

`MDCSegmentedButton`

`MDCSegmentedButtonSegment`

Adapters: `MDCSegmentedButtonAdapter` and `MDCSegmentedButtonSegmentAdapter`

`MDCSegmentedButtonAdapter`

`MDCSegmentedButtonSegmentAdapter`

Foundations: `MDCSegmentedButtonFoundation` and `MDCSegmentedButtonSegmentFoundation`

`MDCSegmentedButtonFoundation`

`MDCSegmentedButtonFoundation` Event Handlers

`MDCSegmentedButtonSegmentFoundation`

`MDCSegmentedButtonSegmentFoundation` Event Handlers