Material components

Buttons prompt most actions in a UI.

Variants. Default and toggle. Five colour options: elevated, filled, tonal, outlined and text.

• Five size recommendations, from extra small to extra large.
• Two shape options: round and square.
• Can contain an optional leading icon.
• Keep labels concise and use sentence case.

Shortcut’s note. Five colours times five sizes times two shapes is a lot of choice. Decide which few your product uses.

Buttons cheat sheetIcon buttonsButton groupsSplit buttons

Icon buttons help people take actions with a single tap.

Variants. Default and toggle, in standard, filled, filled tonal and outlined styles.

• Must use a system icon with a clear meaning.
• On web, display a tooltip describing the action while hovering.
• In toggle buttons, use the outlined icon for unselected and the filled icon for selected.

Shortcut’s note. A tooltip on hover does not help touch users. The icon has to be understood on its own.

Icons cheat sheetButtonsTooltips

FABs help people take primary actions.

Variants. FAB, medium FAB and large FAB.

• Use a FAB for the most common or important action on a screen.
• Make sure the icon is clear and understandable.
• FABs persist on screen while content scrolls.

Shortcut’s note. One per screen. A FAB for a secondary action teaches people to ignore it.

Extended FABsFAB menu

Extended FABs help people take primary actions.

Variants. Small, medium and large.

• Use for the most common or important action on a screen.
• Use instead of a FAB when label text is needed to understand the action.

Shortcut’s note. If the icon needs a label to make sense, this is the honest choice.

Floating action buttons (FABs)

The FAB menu opens from a FAB to display multiple related actions.

New in Material 3 Expressive.

Variants. Primary, secondary and tertiary colour sets.

• Opens from a FAB to show 2 to 6 related actions.
• One FAB menu size for all sizes of FAB.
• Not used with extended FABs.

Shortcut’s note. Related actions only. Unrelated ones belong in navigation or a toolbar.

Floating action buttons (FABs)Menus

Button groups organise buttons and add interactions between them.

New in Material 3 Expressive.

Variants. Standard and connected.

• Connected button groups replace the segmented button.
• Support single-select, multi-select and selection-required.
• Work with all button sizes and can contain buttons and icon buttons.
• Apply a shape morph when pressed and selected.

Shortcut’s note. The connected kind is Material's current answer for choosing one of a few options.

Segmented buttonsButtons

Split buttons open a menu to give people more options related to an action.

New in Material 3 Expressive. The Overview page lists the web implementation as unavailable.

• Use to show an action with a menu of related actions.
• Made of a common button and a menu icon button.
• Same size range as buttons and icon buttons.

Shortcut’s note. The main half should be the action most people want. Hide alternatives, not the default.

ButtonsMenus

Segmented buttons help people select options, switch views, or sort elements.

No longer recommended in the Material 3 Expressive update. Material says to use the connected button group instead.

Variants. Single-select and multi-select.

• Can contain icons, label text, or both.
• Use for simple choices between two to five items.

Shortcut’s note. Check which version your team is on before choosing between this and a connected button group.

Button groups

Badges show notifications, counts, or status information on navigation items and icons.

Variants. Small and large.

• Can contain labels or numbers.
• Anchor inside the icon bounding box, at the upper trailing edge.
• Limit content to four characters, including a plus sign.
• Keep the default colour mapping.

Shortcut’s note. A badge on everything means nothing. Reserve it for what needs attention.

Navigation bar

Loading indicators show the progress of a process for a short wait time.

New in Material 3 Expressive.

Variants. Loading indicator and contained loading indicator.

• Recommended as a replacement for indeterminate circular progress indicators.
• Always reflect an ongoing process; never simply decorative.
• Used for pull-to-refresh.
• Not used for processes that move from indeterminate to determinate.

Shortcut’s note. For short waits only. A long wait needs progress, not a prettier spinner.

Loading States cheat sheetProgress indicators

Progress indicators show the status of a process in real time.

Variants. Linear and circular.

• Use the same configuration for all instances of a process, such as loading.
• They capture attention through motion.
• An optional wave on the active track adds expressiveness.

Shortcut’s note. Pick one style per kind of process and keep it everywhere.

Loading States cheat sheetLoading indicator

Snackbars show short updates about app processes at the bottom of the screen.

• Should not interrupt the user's experience.
• Usually appear at the bottom of the UI.
• Can disappear on their own or stay until the user acts.

Shortcut’s note. If the message matters, one that vanishes on its own will be missed by some people.

Alerts compared across systemsDialogs

Tooltips display brief labels or messages.

Variants. Plain and rich.

• Use to add context to a button or other UI element.
• Plain tooltips describe elements or actions of icon buttons.
• Rich tooltips give more detail and can include a title, link and buttons.

Shortcut’s note. Never the only place essential information lives.

Icon buttons

Bottom sheets show secondary content anchored to the bottom of the screen.

Variants. Standard and modal.

• Use in compact and medium breakpoints.
• Content should be additional or secondary, not the app's main content.
• Can be dismissed to interact with the main content.

Shortcut’s note. On wider windows, Material points to a side sheet instead.

Drawers cheat sheetSide sheetsDialogs

Side sheets show secondary content anchored to the side of the screen.

Variants. Standard and modal.

• Use to provide optional content and actions without interrupting the main content.
• People can navigate to another region within the sheet.
• Can contain a back icon for navigation.

Shortcut’s note. Standard leaves the page usable; modal does not. Choose on purpose.

Drawers cheat sheetBottom sheets

Cards display content and actions about a single subject.

Variants. Elevated, filled and outlined.

• Use cards to contain related elements.
• Contents can include images, headlines, supporting text, buttons and lists.
• Layouts and dimensions flex with their contents.

Shortcut’s note. One subject per card. If everything is a card, nothing is grouped.

Cards cheat sheet

Carousels show a collection of items that can be scrolled on and off the screen.

Variants. Six layouts: multi-browse, uncontained, uncontained multi-aspect ratio, hero, centre-aligned hero and full-screen.

• Contain visual items such as images or video, with optional label text.
• Layouts can be start-aligned or centre-aligned.
• Items change size as they move through the carousel.

Shortcut’s note. Anything off screen is seen less. Do not put the one thing people need in slot four.

Lists

Dialogs provide important prompts in a user flow.

Variants. Basic and full-screen.

• Use dialogs to make sure users act on information.
• Should be dedicated to completing a single task.
• Commonly used to confirm high-risk actions like deleting progress.

Shortcut’s note. A dialog interrupts. If the page behind still matters, use a sheet.

Modals cheat sheetBottom sheetsSnackbar

Dividers are thin lines that group content in lists or other containers.

• Make dividers visible but not bold.
• Only use dividers if items cannot be grouped with open space.
• Use dividers to group things, not separate individual items.

Shortcut’s note. Material itself says to try space first. So does Shortcut.

Shadows and Borders cheat sheetLists

Lists are continuous, vertical indexes of text and images.

Variants. Standard and segmented styles.

• Use lists to help people find a specific item and act on it.
• Order items in logical ways, such as alphabetical or numerical.
• Keep items short and easy to scan.
• Show icons, text and actions in a consistent format.

Shortcut’s note. Consistency is the whole point. One row with a different layout breaks scanning.

DividerCards

App bars are placed at the top of the screen to help people navigate through a product.

Variants. Search app bar, small, medium flexible and large flexible.

• Describe the current page and provide one or two essential actions.
• Use a toolbar, not the app bar, to display page actions.
• On scroll, apply a fill colour to separate from body content.

Shortcut’s note. One or two actions. The rest go in a toolbar or a menu.

ToolbarsSearch

Navigation bars let people switch between UI views on smaller devices.

• Use in compact or medium window sizes.
• Can contain 3 to 5 destinations of equal importance.
• Destinations do not change. Keep them consistent across screens.

Shortcut’s note. Three to five. A sixth destination means rethinking the structure, not shrinking the labels.

Navigation cheat sheetNavigation railNavigation drawer

Navigation rails let people switch between UI views on mid-sized devices.

Variants. Collapsed and expanded, which can transition between each other.

• Use in medium, expanded, large or extra-large window sizes.
• Can contain 3 to 7 destinations plus an optional FAB.
• Always put the rail in the same place, even on different screens of an app.

Shortcut’s note. The expanded rail is Material's replacement for the navigation drawer.

Navigation cheat sheetNavigation barNavigation drawer

Navigation drawers let people switch between UI views on larger devices.

No longer recommended in the Material 3 Expressive update. Material says to use an expanded navigation rail instead.

Variants. Standard and modal.

• Use standard drawers in expanded, large and extra-large breakpoints.
• Use modal drawers in compact and medium breakpoints.
• Put the most frequent destinations at the top and group related ones together.

Shortcut’s note. Still common in shipped apps. Check your version before specifying one.

Navigation rail

Use search for navigating a product with queries.

• A search bar can include a leading search icon, hinted text and optional trailing icons.
• Search can display suggested keywords or phrases as a person types.
• Use a search app bar to provide an emphasised, global entry point.

Shortcut’s note. Search does not replace navigation. People who do not know the word still need a way in.

App bars

Tabs organise content across different screens and views.

Variants. Primary and secondary.

• Use tabs to group content into helpful categories.
• Tabs can scroll horizontally, so a UI can have as many as needed.
• Place tabs next to each other as peers.

Shortcut’s note. "As many as needed" is permission, not advice. Most systems say keep them few.

Tabs compared across systems

Toolbars display frequently used actions relevant to the current page.

New in Material 3 Expressive.

Variants. Docked toolbar and floating toolbar.

• Can display buttons, icon buttons, text fields and other controls.
• Can be paired with FABs to emphasise certain actions.
• Do not show at the same time as a navigation bar.

Shortcut’s note. A toolbar and a navigation bar compete for the same strip of screen. Material says pick one.

App barsNavigation bar

Checkboxes let users select one or more items from a list, or turn an item on or off.

• Use checkboxes, not switches or radio buttons, if multiple options can be selected from a list.
• Labels should be scannable.
• Selected items are more prominent than unselected items.

Shortcut’s note. For a setting that applies at once, Material points to a switch.

Checkbox compared across systemsSwitchRadio button

Chips help people enter information, make selections, filter content, or trigger actions.

Variants. Assist, filter, input and suggestion.

• Use chips to show options for a specific context.
• Elevation defaults to 0 but can be raised for more visual separation.

Shortcut’s note. Four kinds that look alike and behave differently. Use one kind per row.

Button groups

Date pickers let people select a date, or a range of dates.

Variants. Docked, modal and modal input.

• Can display past, present or future dates.
• Clearly indicate important dates, such as current and selected days.
• Follow common patterns, like a calendar view.

Shortcut’s note. For a date people know by heart, such as a birthday, typing is faster than a calendar.

Time pickersText fields

Time pickers help people select and set a specific time.

Variants. Dial and input.

• Time pickers are modal and cover the main content.
• People can select hours, minutes or periods of time.
• Make sure time can easily be selected by hand on a mobile device.

Shortcut’s note. Offer the input variant. A dial is slow for anyone who already knows the time.

Date pickers

Menus display a list of choices on a temporary surface.

• Use a menu to show a temporary set of actions. To show actions at all times, use a toolbar.
• Menus can open from many components, including icon buttons, split buttons and text fields.
• Context menus provide actions for a specific element and usually open with a secondary click.

Shortcut’s note. A menu hides its contents. Anything used constantly should not live in one.

Dropdowns cheat sheetSplit buttonsToolbars

Radio buttons let people select one option from a set of options.

• Use radio buttons, not switches, when only one item can be selected from a list.
• Labels should be scannable.
• Selected items are more prominent than unselected items.

Shortcut’s note. Shows every option at once. That is its advantage over a menu.

Radio compared across systemsCheckboxButton groups

Sliders allow users to make selections from a range of values.

Variants. Standard, centred and range.

• Five sizes, vertical and horizontal orientation, and an optional inset icon.
• Should present the full range of available values.
• The value should take effect immediately.

Shortcut’s note. Good for approximate values. For an exact number, pair it with a field.

Switches toggle the selection of an item on and off.

• Use switches, not radio buttons, if items in a list can be independently controlled.
• Switches are the best way to let people adjust settings.
• Make sure the selection is visible at a glance.

Shortcut’s note. A switch acts at once. If the change needs a Save button, use a checkbox.

Checkbox

Text fields let users enter text into a UI.

Variants. Filled and outlined.

• Make sure text fields look interactive.
• The state, such as blank, with input or error, should be visible at a glance.
• Keep labels and error messages brief and easy to act on.

Shortcut’s note. Pick filled or outlined for the whole product. Mixing them reads as two systems.

Forms cheat sheetSearch