Toggle button group

v1.1

A toggle button group is a single and multi selection pattern that provides increased visual emphasis for the available choices.

Stylized artwork of a toggle button group.

Considerations

Friendly

Toggle button groups are interactive and provide subtle delight to the experience.

Quick

They should be lightweight and easily digestible for the action at hand.

Informative

They should help make decisions easier to scan in order to take action.

Anatomy

A toggle button diagram with 5 elements numbered: 1. Image, 2. Title, 3. Subtitle, 4. Border, 5. Container.
  1. Image
  2. Title
  3. Subtitle
  4. Border
  5. Container

When to use

Use toggle buttons to highlight a selectable option with clear visual feedback. They work best when options stand on their own, helping create a strong visual hierarchy that guides users. For situations where the selection option is isolated, toggle buttons make the experience clear and focused. If your page features multiple selection sections, consider using radio buttons or checkboxes for a more organized and intuitive layout.


  • Use toggle buttons when selection options exist in isolation, meaning they are not part of a multiple selection groups. 

  • Avoid toggle buttons when multiple selection sections appear on the same page or layout. In these cases, use radio buttons for single-choice selections or checkboxes for multiple-choice selections.

Properties

Single select

Single select allows the user to select one option from a set. Only one can be selected at a time.

Three single select toggle buttons are shown.

Multi-select

Multi-select allows the user to select multiple options from a list or a single yes/no option.

A group of toggle buttons are shown in a list, with three buttons selected.

Content area

The content area contains the primary details of each toggle button. This includes a title, subtitle, description, or overline.

The title is required for every option. Keep titles short and concise. Aim for less than 20 characters.

The subtitle is optional. Use a subtitle to provide more context or details. Aim for 1-2 lines.

A text toggle button, an icon toggle button, and an image toggle button are shown with titles.

Lead element

The lead element is optional. It provides visual support for the available options. There are 2 options for lead elements: Icon and Image.

An icon toggle button and an image toggle button are shown with supporting visuals.

Layout

Toggle buttons can be presented in 3 variants: Minimal, List view, and Gallery view.

A minimal toggle button, a list view toggle button, and a gallery view toggle button group is shown.

Behavior

Overflow

Titles and subtitles wrap to another line when wider than the container. Keep titles and subtitles short to avoid overly tall buttons on smaller screens.

Toggle buttons with titles and subtitles that wrap to multiple lines.

Selection

The selection state toggles on and off for both multi and single select option list styles.

On selection the border color changes to “border.strong”, the border width increases, and the background color changes to “background.secondary”.

A toggle button group in a list featuring a selected button.

State

Toggle buttons use state layers for interaction states. The available states are enabled, hover, disabled, and focused. Learn more about the state layer color values in Color tokens.

A series of toggle buttons in enabled, hover, pressed, disabled, and focused states.

Size

It is important to ensure you follow the sizing guide for each toggle button variant. The various styles and layouts adhere to different minimum and maximum sizing rules.

Minimal

The minimal layout has a minimum width of 72px and a minimal height of 40px. The minimal layout has a maximum width of 600px.

List view

List view layouts have a minimum width of 140px and a maximum width of 600px.

Three toggle buttons with a width of 342px sit to the left of three toggle buttons with a width of 224px.

Gallery view

Gallery layouts have a a minimum width of 140pc and maximum width of 140px.

Two gallery toggle buttons with icons have widths of 168px and 342px, and two gallery toggle buttons with images have widths of 168px and 342px.

Screen sizes

Small

A toggle button group in a list is displayed on a mobile screen.

Medium and large

A toggle button group in a gallery is displayed on a larger screen.

Best practices

CTA buttons

Do use the variant options provided within the component.

Two text toggle buttons sit on top of one another.

Don’t add CTAs or additional buttons to the option list.

Two text toggle buttons with CTAs sit on top of one another.

Additional controls

Keep content minimal and straight forward.

A text toggle button in a selected state sits above a text toggle button in an enabled state.

Don’t add additional controls or selection indicators, such as checkbox, radio button, or checkmark.

A text toggle button with a radio button in a selected state sits above a text toggle button with a radio button in an enabled state.

Content length

Keep titles to a single line of copy when possible. Subtitles can have more content but should not exceed 3 lines of content.

A toggle button with an image is shown with a title and two lines of subtitle text.

Avoid lengthy content. Keep your title and subtitle short and concise.

A toggle button with an image is shown with a title and four lines of subtitle text.

Binary choices

Do use the radio component for short, binary options.

stacked radio button. The first radio button option is labeled “Yes”, the second radio option is labeled “No”.

Don’t use the Toggle Button Group component for short, binary options.

A text only toggle button with the title ‘For new born to 3 month olds’.

Overflow

The title can wrap to 2 lines for the title-only option. In general, keep your content brief and to the point.

A text only toggle button with the title ‘0-3
months’.

Don’t write overly detailed titles. If more room is needed consider using a different layout variant.

A text only toggle button with the title ‘For new born to 3 month olds’.

Size consistency

Do keep all buttons the same height and width when grouped.

A set of toggle buttons all a consistent size.

Don’t create buttons with differing heights and widths in the same group.

A set of toggle buttons all a different sizes.

Filtering

Do use the radio component for short, binary options.

A filter sheet with three sections. Each section is using the quick filter component to show selectable filters.

Don’t use the Toggle Button Group component for short, binary options.

A filter sheet with three sections. Each section is using the Toggle buttons to show selectable filters.

Navigation

Do use tab to navigate between pages

A page with tabs for navigating to subpages labeled “Vehicles”, “Parts & accessories”, and “DIY Guides”.

Do not use toggle buttons to navigate between pages or views.

A page with toggle for navigating to subpages labeled “Vehicles”, “Parts & accessories”, and “DIY Guides”.

Progressive disclosure

Do use progressive disclosure to present the next section within a flow base on a user’s selection, keeping the interface clean and focused.

A text only toggle button with the title ‘0-3
months’.

Do not place progressive disclosure within a toggle button itself, as this could hide critical information needed to make an informed choice. Key details should always be visible before a selection is made.

A text only toggle button with the title ‘For new born to 3 month olds’.

Specs

A toggle button list is shown with specs. The padding on the top and bottom of the toggle button is 12px, and the padding on the left and right of the toggle button is 16px. The padding between the image and text content is 16px, and the padding between the title and subtitle is 4px. The corner radius around the button is 8px.
A toggle button gallery is shown with specs. The padding on the top, bottom, left, and right of the toggle button is 16px. The padding between the image and text content is 16px, and the padding between the title and subtitle is 4px. The corner radius around the button is 16px.