--- url: /components/segmented-buttons/guidelines.md description: Segmented buttons help people select options, switch views, or sort elements. --- # Segmented buttons Segmented buttons help people select options, switch views, or sort elements. [Overview](overview.md) · [Specs](specs.md) · **Guidelines** · [Accessibility](accessibility.md) ::: info Note Segmented buttons are no longer recommended in the Material 3 expressive update. For those who have updated, use the [connected button group](../button-groups/overview.md) instead, which has mostly the same functionality but with an updated visual design. ::: ![Two types of segmented buttons.](/assets/776ed1f1-lw7mlxdq-1.C3gpJ7pd.webp) 1. Single-select  2. Multi-select ## Usage Segmented buttons help people select options, switch views, or sort elements. ![A segmented button for switching between restaurants and bar options.](/assets/0b7f53f6-lw7mnnk2-2.mHHctdaR.webp) A segmented button can help switch between viewing restaurant and bar options There are 2 variants of segmented buttons: 1. Single-select 2. Multi-select ![Side by side view of single and multi-select segmented buttons](/assets/d65b97bb-lw7mz9ev-3.BjUVqyPw.webp) 1. Single-select segmented button can only have 1 segment selected 2. Multi-select segmented button can have multiple segments selected ## Anatomy ![Diagram of segmented button indicating 5 parts of its anatomy](/assets/8677cc5a-lw7n59nt-4.BhWzCV8Q.webp) 1. Segment 2. Container 3. Icon (optional) 4. Label text (optional) 5. Selected icon ### Segments Segmented buttons can have 2-5 segments. Each segment is clearly divided and contains label text, an icon, or both. ![Side by side view of segmented buttons each with additional segment starting from 2 to 5](/assets/4fa873cb-lw7nap4m-5.BfGum-8D.webp) There can be anywhere from 2 to 5 segments in single-select and multi-select segmented buttons ::: tip Do ![Mobile UI of data usage screen with segmented button](/assets/fc7ad73e-lw7ngd39-6_do.n1ZSJVvn.webp) Segmented buttons are best used for selecting between 2 and 5 choices ::: ::: danger Don't ![Incorrect use of segmented button with 6 segments](/assets/6965f4c6-lw7o4u2i-7_dont.BwbemknQ.webp) Don’t use more than five segments in a single segmented button. Choices should be scoped. If you have more than five choices, consider using another component, such as chips. ::: ### Container Like common buttons, segmented buttons have fully rounded corners by default. ![Close up detail of segmented button with fully rounded corners](/assets/f6b10364-lw7o7un8-8.CEKQ-9ag.webp) Segmented buttons have fully rounded corners ### Icons Icons may be used as labels by themselves or alongside text.  If an icon is used without label text, it must clearly communicate the option it represents. ![Side by side view of segmented buttons with different configurations of icons and label text](/assets/7e9c05d5-lw7okkk9-9.D-JwG0TV.webp) Segmented buttons can include icons ### Label text Labels should be short and succinct. If a label is too long to fit within its segment, consider using an icon alone. ![Mobile UI of music app showing a segmented button with options for music, albums, podcasts](/assets/07bbfa42-lw7omu8a-10.DZcAaP6l.webp) Use labels that are as clear and short as possible ::: tip Do ![Segmented button with options for day, week, month](/assets/51d4eb0b-lw7pqz1e-11_do.B_z7NMJc.webp) Keep labels short and consistent in length ::: ::: danger Don't ![Segmented button with 4 segments. 3 are next to each other. The 4th is wrapped on a new line.](/assets/8ad45b47-lw7prory-12_dont.CHZEo4qJ.webp) Don’t allow segments to wrap onto a new line ::: ::: tip Do ![Segmented button with text labels reading day, week, month](/assets/66179666-lw7psieh-13_do.SS0Zyb-Q.webp) Use consistent label types ::: ::: warning Caution ![Segmented button with icons only labels for walking, transit, driving](/assets/5b387585-lw7pt9gl-14_caution.DMV4jWCv.webp) Icons can be used in place of labels, but they must clearly communicate their meaning ::: ::: danger Don't ![Segmented button with 2 icon only options indicating favorite and bookmark and 3rd option with text label reading recent](/assets/77975c3b-lw7ptzzf-15_dont.B-ypveYS.webp) Avoid mixing icon-only labels with text labels. Choose one label type and use that type for all segments. ::: ## Single-select Use a single-select segmented button to select one option from a set, switch between views, or sort elements from up to five options.  For example, use a single-select segmented button to choose one of a set of sizes, such as this beverage size selector. ![Mobile UI for ecommerce app with segmented button with 3 beverage size options](/assets/6b34eca0-lw7puwq3-16.B2H3-8vi.webp) A single select segmented button for choosing beverage size ## Multi-select Use a multi-select segmented button to select or sort from two to five options. Unlike single-select, selection is not required and a user may concurrently select anywhere from all to none of the options.  For example, multi-select segmented buttons can be used to filter by price range when searching for a restaurant. ![Mobile UI for ecommerce app with multi-select segmented button with 4 price range options](/assets/d71e377b-lw7pvpf7-17.BFn5ZZi5.webp) A multi-select segmented button for filtering restaurant search options ## Placement Segmented buttons should have adequate [margins](../../styles/spacing/overview.md "Margins are the spaces between the edge of a nested element and its parent element, such as the space between a button's label text and the edge of its container.") from the edge of the viewport or frame.  On larger screens, set a maximum padding for all button segments so the set doesn't fill the screen. ::: tip Do ![Mobile UI with 2-segment segmented button and 4-segment segmented button each with same margins to the viewport edge.](/assets/ee9fcd84-lw7pwh9i-18.DA3nvw1I.webp) Allow adequate space for margins. The button container shouldn’t reach the edge of the viewport. ::: ::: tip Do ![Game store UI with a segmented button the proper width](/assets/c65a9571-lw7pxu9q-18-a_do.CZR14xNc.webp) Set a maximum padding within the segments to ensure usability on larger screens ::: ::: danger Don't ![Game store UI with a segmented button improperly spanning the entire width of the screen](/assets/5c86328a-lw7pyzy1-18-b_dont.CzFIB4ns.webp) Don’t allow segmented buttons to span the full width of larger screens or panes. This can leave too much padding on either side of the segment label, making the button less usable. ::: Segmented buttons can be placed on other components, such as [bottom sheets](../bottom-sheets/overview.md "Bottom sheets show secondary content anchored to the bottom of the screen.") or full-screen dialogs. ![Mobile UI with segmented button in bottom sheet](/assets/1d798a18-lw7q0vrm-19.EIAOVXV3.webp) A segmented button can be placed on a bottom sheet ## Behavior When using both icons and label text in segmented buttons, the icon label is replaced by the checkmark icon when the segment is selected. Icons become checkmarks when selected in buttons that also use label text