# Material Design 3

> Offline Reference

Markdown mirror of m3.material.io

## Table of Contents

### Foundations

- [Foundations](/foundations.md): Foundations inform the basis of any great user interface, from accessibility standards to essential patterns for layout and interaction.
- [Overview](/foundations/overview/principles.md): Accessible design enables users with diverse abilities to navigate, understand, and enjoy a UI
- [Designing](/foundations/designing/overview.md): Implement intuitive, accessible layouts, considering structure, color, and flow
- [Writing and text](/foundations/writing/best-practices.md): Ensure text is helpful, clear, and resilient to change
- [Material A-Z](/foundations/glossary.md): Get to know the key terms and concepts behind Material, from A to Z
- [Building for all](/foundations/building-for-all/user-needs.md): Building for everyone with everyone
- [Customizing Material](/foundations/customization.md): Customization creates unique branded products with familiar patterns and accessible interactions
- [Design tokens](/foundations/design-tokens/overview.md): Design tokens are the building blocks of all UI elements. The same tokens are used in designs, tools, and code.
- [Design for watches](/foundations/watches/overview.md): Watches have special design considerations and interaction patterns
- [Usability](/foundations/usability/overview.md): Usability focuses on making products intuitive and easy to understand for everyone

#### Overview

- [Overview](/foundations/overview/principles.md): Accessible design enables users with diverse abilities to navigate, understand, and enjoy a UI
- [Overview](/foundations/overview/assistive-technology.md): Accessible design enables users with diverse abilities to navigate, understand, and enjoy a UI

#### Designing

- [Designing](/foundations/designing/overview.md): Implement intuitive, accessible layouts, considering structure, color, and flow
- [Designing](/foundations/designing/color-contrast.md): Implement intuitive, accessible layouts, considering structure, color, and flow
- [Designing](/foundations/designing/structure.md): Implement intuitive, accessible layouts, considering structure, color, and flow
- [Designing](/foundations/designing/flow.md): Implement intuitive, accessible layouts, considering structure, color, and flow
- [Designing](/foundations/designing/elements.md): Implement intuitive, accessible layouts, considering structure, color, and flow

#### Writing and text

- [Writing and text](/foundations/writing/best-practices.md): Ensure text is helpful, clear, and resilient to change
- [Writing and text](/foundations/writing/text-truncation.md): Ensure text is helpful, clear, and resilient to change
- [Writing and text](/foundations/writing/text-resizing.md): Ensure text is helpful, clear, and resilient to change

#### Building for all

- [Building for all](/foundations/building-for-all/user-needs.md): Building for everyone with everyone
- [Building for all](/foundations/building-for-all/co-design.md): Building for everyone with everyone

#### Design tokens

- [Design tokens](/foundations/design-tokens/overview.md): Design tokens are the building blocks of all UI elements. The same tokens are used in designs, tools, and code.
- [Design tokens](/foundations/design-tokens/how-to-use-tokens.md): Design tokens are the building blocks of all UI elements. The same tokens are used in designs, tools, and code.

#### Design for watches

- [Design for watches](/foundations/watches/overview.md): Watches have special design considerations and interaction patterns
- [Design for watches](/foundations/watches/foundations.md): Watches have special design considerations and interaction patterns
- [Design for watches](/foundations/watches/styles.md): Watches have special design considerations and interaction patterns
- [Design for watches](/foundations/watches/layout.md): Watches have special design considerations and interaction patterns

#### Usability

- [Usability](/foundations/usability/overview.md): Usability focuses on making products intuitive and easy to understand for everyone
- [Usability](/foundations/usability/applying-m3-expressive.md): Usability focuses on making products intuitive and easy to understand for everyone

#### Content design

- [Content design](/foundations/content-design/overview.md): UX writing and information design make UIs easy to use
- [Alt text](/foundations/content-design/alt-text.md): Effective alt text describes the meaning and context of images for screen reader users
- [Global writing](/foundations/content-design/global-writing/overview.md): Global writing is easier to read, understand, and translate. This guidance is for all American English that is localized.
- [Notifications](/foundations/content-design/notifications.md): Notifications help people see information they need or want at the right time
- [Style guide](/foundations/content-design/style-guide/ux-writing-best-practices.md): UI text should be understandable by anyone, anywhere

##### Global writing

- [Global writing](/foundations/content-design/global-writing/overview.md): Global writing is easier to read, understand, and translate. This guidance is for all American English that is localized.
- [Global writing](/foundations/content-design/global-writing/word-choice.md): Global writing is easier to read, understand, and translate. This guidance is for all American English that is localized.

##### Style guide

- [Style guide](/foundations/content-design/style-guide/ux-writing-best-practices.md): UI text should be understandable by anyone, anywhere
- [Style guide](/foundations/content-design/style-guide/word-choice.md): UI text should be understandable by anyone, anywhere
- [Style guide](/foundations/content-design/style-guide/grammar-and-punctuation.md): UI text should be understandable by anyone, anywhere

#### XR

- [Design for immersive XR](/foundations/xr/design/overview.md): Resources and guidance for immersive extended reality (XR) devices
- [XR components](/foundations/xr/components/overview.md): Learn how Material 3 Expressive components adapt to extended reality devices

##### Design for immersive XR

- [Design for immersive XR](/foundations/xr/design/overview.md): Resources and guidance for immersive extended reality (XR) devices
- [Design for immersive XR](/foundations/xr/design/interaction.md): Resources and guidance for immersive extended reality (XR) devices
- [Design for immersive XR](/foundations/xr/design/layout.md): Resources and guidance for immersive extended reality (XR) devices
- [Design for immersive XR](/foundations/xr/design/accessibility.md): Resources and guidance for immersive extended reality (XR) devices

##### XR components

- [XR components](/foundations/xr/components/overview.md): Learn how Material 3 Expressive components adapt to extended reality devices
- [XR components](/foundations/xr/components/app-bars.md): Learn how Material 3 Expressive components adapt to extended reality devices
- [XR components](/foundations/xr/components/dialogs.md): Learn how Material 3 Expressive components adapt to extended reality devices
- [XR components](/foundations/xr/components/nav-bar.md): Learn how Material 3 Expressive components adapt to extended reality devices
- [XR components](/foundations/xr/components/nav-rail.md): Learn how Material 3 Expressive components adapt to extended reality devices
- [XR components](/foundations/xr/components/toolbars.md): Learn how Material 3 Expressive components adapt to extended reality devices

#### Layout

- [Layout overview](/foundations/layout/layout-overview/overview.md): Layout is the visual and strategic arrangement of elements on a screen
- [Breakpoints](/foundations/layout/breakpoints/overview.md): Breakpoints ensure layouts work across a wide range of devices
- [Canonical layout examples](/foundations/layout/canonical-examples/overview.md): Canonical layout examples are designs for common screen layouts across all breakpoints
- [Scaffold](/foundations/layout/scaffold/overview.md): A fundamental UI design structure that provides a standard platform for assembling key components
- [Grids & spacing](/foundations/layout/grids-spacing/overview.md): Grids and spacing organize content and actions for any layout
- [Bidirectionality & RTL](/foundations/layout/bidirectionality-rtl.md): Design products that adapt to languages that read right-to-left (RTL)

##### Layout overview

- [Layout overview](/foundations/layout/layout-overview/overview.md): Layout is the visual and strategic arrangement of elements on a screen
- [Layout overview](/foundations/layout/layout-overview/parts-of-layout.md): Layout is the visual and strategic arrangement of elements on a screen
- [Layout overview](/foundations/layout/layout-overview/adaptive-design.md): Layout is the visual and strategic arrangement of elements on a screen

##### Breakpoints

- [Breakpoints](/foundations/layout/breakpoints/overview.md): Breakpoints ensure layouts work across a wide range of devices
- [Breakpoints](/foundations/layout/breakpoints/compact.md): Breakpoints ensure layouts work across a wide range of devices
- [Breakpoints](/foundations/layout/breakpoints/medium.md): Breakpoints ensure layouts work across a wide range of devices
- [Breakpoints](/foundations/layout/breakpoints/expanded.md): Breakpoints ensure layouts work across a wide range of devices
- [Breakpoints](/foundations/layout/breakpoints/large-extra-large.md): Breakpoints ensure layouts work across a wide range of devices

##### Canonical layout examples

- [Canonical layout examples](/foundations/layout/canonical-examples/overview.md): Canonical layout examples are designs for common screen layouts across all breakpoints
- [Canonical layout examples](/foundations/layout/canonical-examples/feed.md): Canonical layout examples are designs for common screen layouts across all breakpoints
- [Canonical layout examples](/foundations/layout/canonical-examples/list-detail.md): Canonical layout examples are designs for common screen layouts across all breakpoints
- [Canonical layout examples](/foundations/layout/canonical-examples/supporting-pane.md): Canonical layout examples are designs for common screen layouts across all breakpoints

##### Scaffold

- [Scaffold](/foundations/layout/scaffold/overview.md): A fundamental UI design structure that provides a standard platform for assembling key components
- [Scaffold](/foundations/layout/scaffold/bars.md): A fundamental UI design structure that provides a standard platform for assembling key components
- [Scaffold](/foundations/layout/scaffold/rails.md): A fundamental UI design structure that provides a standard platform for assembling key components
- [Scaffold](/foundations/layout/scaffold/panes.md): A fundamental UI design structure that provides a standard platform for assembling key components

##### Grids & spacing

- [Grids & spacing](/foundations/layout/grids-spacing/overview.md): Grids and spacing organize content and actions for any layout
- [Grids & spacing](/foundations/layout/grids-spacing/grids.md): Grids and spacing organize content and actions for any layout
- [Grids & spacing](/foundations/layout/grids-spacing/spacing.md): Grids and spacing organize content and actions for any layout
- [Grids & spacing](/foundations/layout/grids-spacing/density.md): Grids and spacing organize content and actions for any layout

#### Interaction

- [Gestures](/foundations/interaction/gestures.md): Gestures are all the ways people interact with UI elements using touch
- [Inputs](/foundations/interaction/inputs.md): Inputs are devices that provide interactive control of an app. Common inputs include a mouse, keyboard, or touchpad.
- [Selection](/foundations/interaction/selection.md): Selection is how people interact with UI elements or choose which items to act on
- [States](/foundations/interaction/states/overview.md): States show the interaction status of a component or UI element

##### States

- [States](/foundations/interaction/states/overview.md): States show the interaction status of a component or UI element
- [States](/foundations/interaction/states/state-layers.md): States show the interaction status of a component or UI element
- [States](/foundations/interaction/states/applying-states.md): States show the interaction status of a component or UI element

### Styles

- [Styles](/styles.md): Styles are the visual aspects of a UI that give it a distinct look and feel. They can be customized by changing your Material theme.
- [Icons](/styles/icons/overview.md): Icons are small symbols to easily identify actions and categories
- [Shape](/styles/shape/overview-principles.md): The M3 shape system includes original shapes, a corner radius scale, and built-in shape morphing
- [Spacing](/styles/spacing/overview.md): Spacing is the distance around and between component and layout elements
- [Typography](/styles/typography/overview.md): Use typography to make content readable and beautiful
- [Elevation](/styles/elevation/overview.md): Elevation is the distance between two surfaces on the z-axis

#### Icons

- [Icons](/styles/icons/overview.md): Icons are small symbols to easily identify actions and categories
- [Icons](/styles/icons/designing-icons.md): Icons are small symbols to easily identify actions and categories
- [Icons](/styles/icons/applying-icons.md): Icons are small symbols to easily identify actions and categories

#### Shape

- [Shape](/styles/shape/overview-principles.md): The M3 shape system includes original shapes, a corner radius scale, and built-in shape morphing
- [Shape](/styles/shape/corner-radius-scale.md): The M3 shape system includes original shapes, a corner radius scale, and built-in shape morphing
- [Shape](/styles/shape/shape-morph.md): The M3 shape system includes original shapes, a corner radius scale, and built-in shape morphing

#### Spacing

- [Spacing](/styles/spacing/overview.md): Spacing is the distance around and between component and layout elements
- [Spacing](/styles/spacing/applying-spacing.md): Spacing is the distance around and between component and layout elements
- [Spacing](/styles/spacing/tokens.md): Spacing is the distance around and between component and layout elements

#### Typography

- [Typography](/styles/typography/overview.md): Use typography to make content readable and beautiful
- [Typography](/styles/typography/fonts.md): Use typography to make content readable and beautiful
- [Typography](/styles/typography/type-scale-tokens.md): Use typography to make content readable and beautiful
- [Typography](/styles/typography/applying-type.md): Use typography to make content readable and beautiful
- [Typography](/styles/typography/editorial-treatments.md): Use typography to make content readable and beautiful

#### Elevation

- [Elevation](/styles/elevation/overview.md): Elevation is the distance between two surfaces on the z-axis
- [Elevation](/styles/elevation/applying-elevation.md): Elevation is the distance between two surfaces on the z-axis
- [Elevation](/styles/elevation/tokens.md): Elevation is the distance between two surfaces on the z-axis

#### Color

- [Color system](/styles/color/system/overview.md): Create accessible, personal color schemes communicating your product's hierarchy, state, and brand
- [Color roles](/styles/color/roles.md): There are 26 standard color roles organized into six groups: primary, secondary, tertiary, error, surface, and outline
- [Choosing a scheme](/styles/color/choosing-a-scheme.md): Static color schemes emphasize brand and uniformity, while dynamic schemes emphasize content or user settings to make products feel more personal
- [Static color schemes](/styles/color/static/baseline.md): Static color schemes are ideal for branded products that should have a consistent, uniform design
- [Dynamic color schemes](/styles/color/dynamic/choosing-a-source.md): Dynamic color can change a color palette to match user settings, like wallpapers, or in-product content
- [Advanced customizations](/styles/color/advanced/overview.md): Apply, define, or adjust colors to create a fine-tuned, unique color experience
- [Color resources](/styles/color/resources.md): Use color tools and tutorials to quickly create and apply color palettes

##### Color system

- [Color system](/styles/color/system/overview.md): Create accessible, personal color schemes communicating your product's hierarchy, state, and brand
- [Color system](/styles/color/system/how-the-system-works.md): Create accessible, personal color schemes communicating your product's hierarchy, state, and brand

##### Static color schemes

- [Static color schemes](/styles/color/static/baseline.md): Static color schemes are ideal for branded products that should have a consistent, uniform design
- [Static color schemes](/styles/color/static/custom-brand.md): Static color schemes are ideal for branded products that should have a consistent, uniform design

##### Dynamic color schemes

- [Dynamic color schemes](/styles/color/dynamic/choosing-a-source.md): Dynamic color can change a color palette to match user settings, like wallpapers, or in-product content
- [Dynamic color schemes](/styles/color/dynamic/user-generated-source.md): Dynamic color can change a color palette to match user settings, like wallpapers, or in-product content
- [Dynamic color schemes](/styles/color/dynamic/content-based-source.md): Dynamic color can change a color palette to match user settings, like wallpapers, or in-product content

##### Advanced customizations

- [Advanced customizations](/styles/color/advanced/overview.md): Apply, define, or adjust colors to create a fine-tuned, unique color experience
- [Advanced customizations](/styles/color/advanced/apply-colors.md): Apply, define, or adjust colors to create a fine-tuned, unique color experience
- [Advanced customizations](/styles/color/advanced/define-new-colors.md): Apply, define, or adjust colors to create a fine-tuned, unique color experience
- [Advanced customizations](/styles/color/advanced/adjust-existing-colors.md): Apply, define, or adjust colors to create a fine-tuned, unique color experience

#### Motion

- [Motion physics system](/styles/motion/overview/how-it-works.md): The motion physics system makes a UI expressive and easy to use
- [Easing and duration](/styles/motion/easing-and-duration/applying-easing-and-duration.md): Easing and duration create responsive and expressive motion
- [Transitions](/styles/motion/transitions/transition-patterns.md): Transitions help guide people as they navigate an app

##### Motion physics system

- [Motion physics system](/styles/motion/overview/how-it-works.md): The motion physics system makes a UI expressive and easy to use
- [Motion physics system](/styles/motion/overview/specs.md): The motion physics system makes a UI expressive and easy to use

##### Easing and duration

- [Easing and duration](/styles/motion/easing-and-duration/applying-easing-and-duration.md): Easing and duration create responsive and expressive motion
- [Easing and duration](/styles/motion/easing-and-duration/tokens-specs.md): Easing and duration create responsive and expressive motion

##### Transitions

- [Transitions](/styles/motion/transitions/transition-patterns.md): Transitions help guide people as they navigate an app
- [Transitions](/styles/motion/transitions/applying-transitions.md): Transitions help guide people as they navigate an app

### Components

- [Components](/components.md): Components are interactive building blocks for creating a user interface. They can be organized into categories based on their purpose: Action, containment, communication, navigation, selection, and text input.
- [App bars](/components/app-bars/overview.md): Top app bars display navigation, actions, and text at the top of a screen. They contain a title and actions related to the current screen.
- [Badges](/components/badges/overview.md): Badges are used as indicators to convey dynamic information, such as counts or status. A badge can include labels or numbers.
- [Cards](/components/cards/overview.md): Cards display content and actions about a single subject.
- [Carousel](/components/carousel/overview.md): Carousels show a collection of items that can be scrolled on and off the screen. Contain visual items like images or video, along with optional label text.
- [Checkbox](/components/checkbox/overview.md): Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.
- [Chips](/components/chips/overview.md): Chips help people enter information, make selections, filter content, or trigger actions. Use chips to show options for a specific context.
- [Dialogs](/components/dialogs/overview.md): Dialogs provide important prompts in a user flow. Use dialogs to make sure users act on information
- [Divider](/components/divider/overview.md): A divider is a thin line that groups content in lists and containers.
- [Lists](/components/lists/overview.md): Lists are continuous, vertical indexes of text or images.
- [Menus](/components/menus/overview.md): Menus display a list of choices on a temporary surface. Menus can open from a variety of components, including icon buttons and text fields.
- [Radio button](/components/radio-button/overview.md): Radio buttons allow users to select one option from a set.
- [Search](/components/search/overview.md): Search lets people enter a keyword or phrase to get relevant information. Search bars can display suggested keywords or phrases as the user types.
- [Sliders](/components/sliders/overview.md): Sliders let users make selections from a range of values. There are four configurations: continuous, discrete, centered, range selection.
- [Snackbar](/components/snackbar/overview.md): Snackbars provide brief messages about app processes at the bottom of the screen.
- [Switch](/components/switch/overview.md): Switches toggle the selection of an item on or off. Switches are the best way to let users adjust settings.
- [Tabs](/components/tabs/overview.md): Tabs organize content across different screens, data sets, and other interactions.
- [Text fields](/components/text-fields/overview.md): Text fields let users enter text into a UI. They typically appear in forms and dialogs.
- [Toolbars](/components/toolbars/overview.md): Toolbars display frequently used actions relevant to the current page.
- [Tooltips](/components/tooltips/overview.md): Tooltips display brief labels or messages. Tooltips are informative, specific, and action-oriented text labels that provide contextual support

#### App bars

- [App bars](/components/app-bars/overview.md): Top app bars display navigation, actions, and text at the top of a screen. They contain a title and actions related to the current screen.
- [App bars](/components/app-bars/specs.md): Top app bars display navigation, actions, and text at the top of a screen. They contain a title and actions related to the current screen.
- [App bars](/components/app-bars/guidelines.md): Top app bars display navigation, actions, and text at the top of a screen. They contain a title and actions related to the current screen.
- [App bars](/components/app-bars/accessibility.md): Top app bars display navigation, actions, and text at the top of a screen. They contain a title and actions related to the current screen.

#### Badges

- [Badges](/components/badges/overview.md): Badges are used as indicators to convey dynamic information, such as counts or status. A badge can include labels or numbers.
- [Badges](/components/badges/specs.md): Badges are used as indicators to convey dynamic information, such as counts or status. A badge can include labels or numbers.
- [Badges](/components/badges/guidelines.md): Badges are used as indicators to convey dynamic information, such as counts or status. A badge can include labels or numbers.
- [Badges](/components/badges/accessibility.md): Badges are used as indicators to convey dynamic information, such as counts or status. A badge can include labels or numbers.

#### Buttons

- [All buttons](/components/all-buttons.md): When choosing the right button for an action, consider the level of emphasis each button type provides
- [Button groups](/components/button-groups/overview.md): Button groups organize buttons and add interactions between them
- [Buttons](/components/buttons/overview.md): Buttons help people take action, such as sending an email, sharing a document, or liking a comment. Common buttons prompt most actions in a UI.
- [Extended FABs](/components/extended-fab/overview.md): Extended floating action buttons (extended FABs) help people take primary actions, just like FABs. They’re wider than FABs and include a text label, providing more detail and a larger target surface.
- [FAB menu](/components/fab-menu/overview.md): The floating action button (FAB) menu opens from a FAB to display multiple related actions
- [FABs](/components/floating-action-button/overview.md): Floating action buttons (FABs) help people take primary actions. They’re used to represent the most important action on a screen, such as Create or Reply.
- [Icon buttons](/components/icon-buttons/overview.md): Icon buttons help people take supplementary actions with a single tap.
- [Segmented buttons](/components/segmented-buttons/overview.md): Segmented buttons help people select options, switch views, or sort elements.
- [Split buttons](/components/split-button/overview.md): Split buttons combine a primary action with a secondary action in a single component.

##### Button groups

- [Button groups](/components/button-groups/overview.md): Button groups organize buttons and add interactions between them
- [Button groups](/components/button-groups/specs.md): Button groups organize buttons and add interactions between them
- [Button groups](/components/button-groups/guidelines.md): Button groups organize buttons and add interactions between them
- [Button groups](/components/button-groups/accessibility.md): Button groups organize buttons and add interactions between them

##### Buttons

- [Buttons](/components/buttons/overview.md): Buttons help people take action, such as sending an email, sharing a document, or liking a comment. Common buttons prompt most actions in a UI.
- [Buttons](/components/buttons/specs.md): Buttons help people take action, such as sending an email, sharing a document, or liking a comment. Common buttons prompt most actions in a UI.
- [Buttons](/components/buttons/guidelines.md): Buttons help people take action, such as sending an email, sharing a document, or liking a comment. Common buttons prompt most actions in a UI.
- [Buttons](/components/buttons/accessibility.md): Buttons help people take action, such as sending an email, sharing a document, or liking a comment. Common buttons prompt most actions in a UI.

##### Extended FABs

- [Extended FABs](/components/extended-fab/overview.md): Extended floating action buttons (extended FABs) help people take primary actions, just like FABs. They’re wider than FABs and include a text label, providing more detail and a larger target surface.
- [Extended FABs](/components/extended-fab/specs.md): Extended floating action buttons (extended FABs) help people take primary actions, just like FABs. They’re wider than FABs and include a text label, providing more detail and a larger target surface.
- [Extended FABs](/components/extended-fab/guidelines.md): Extended floating action buttons (extended FABs) help people take primary actions, just like FABs. They’re wider than FABs and include a text label, providing more detail and a larger target surface.
- [Extended FABs](/components/extended-fab/accessibility.md): Extended floating action buttons (extended FABs) help people take primary actions, just like FABs. They’re wider than FABs and include a text label, providing more detail and a larger target surface.

##### FAB menu

- [FAB menu](/components/fab-menu/overview.md): The floating action button (FAB) menu opens from a FAB to display multiple related actions
- [FAB menu](/components/fab-menu/specs.md): The floating action button (FAB) menu opens from a FAB to display multiple related actions
- [FAB menu](/components/fab-menu/guidelines.md): The floating action button (FAB) menu opens from a FAB to display multiple related actions
- [FAB menu](/components/fab-menu/accessibility.md): The floating action button (FAB) menu opens from a FAB to display multiple related actions

##### FABs

- [FABs](/components/floating-action-button/overview.md): Floating action buttons (FABs) help people take primary actions. They’re used to represent the most important action on a screen, such as Create or Reply.
- [FABs](/components/floating-action-button/specs.md): Floating action buttons (FABs) help people take primary actions. They’re used to represent the most important action on a screen, such as Create or Reply.
- [FABs](/components/floating-action-button/guidelines.md): Floating action buttons (FABs) help people take primary actions. They’re used to represent the most important action on a screen, such as Create or Reply.
- [FABs](/components/floating-action-button/accessibility.md): Floating action buttons (FABs) help people take primary actions. They’re used to represent the most important action on a screen, such as Create or Reply.

##### Icon buttons

- [Icon buttons](/components/icon-buttons/overview.md): Icon buttons help people take supplementary actions with a single tap.
- [Icon buttons](/components/icon-buttons/specs.md): Icon buttons help people take supplementary actions with a single tap.
- [Icon buttons](/components/icon-buttons/guidelines.md): Icon buttons help people take supplementary actions with a single tap.
- [Icon buttons](/components/icon-buttons/accessibility.md): Icon buttons help people take supplementary actions with a single tap.

##### Segmented buttons

- [Segmented buttons](/components/segmented-buttons/overview.md): Segmented buttons help people select options, switch views, or sort elements.
- [Segmented buttons](/components/segmented-buttons/specs.md): Segmented buttons help people select options, switch views, or sort elements.
- [Segmented buttons](/components/segmented-buttons/guidelines.md): Segmented buttons help people select options, switch views, or sort elements.
- [Segmented buttons](/components/segmented-buttons/accessibility.md): Segmented buttons help people select options, switch views, or sort elements.

##### Split button

- [Split buttons](/components/split-button/overview.md): Split buttons combine a primary action with a secondary action in a single component.
- [Split buttons](/components/split-button/specs.md): Split buttons combine a primary action with a secondary action in a single component.
- [Split buttons](/components/split-button/guidelines.md): Split buttons combine a primary action with a secondary action in a single component.
- [Split buttons](/components/split-button/accessibility.md): Split buttons combine a primary action with a secondary action in a single component.

#### Cards

- [Cards](/components/cards/overview.md): Cards display content and actions about a single subject.
- [Cards](/components/cards/specs.md): Cards display content and actions about a single subject.
- [Cards](/components/cards/guidelines.md): Cards display content and actions about a single subject.
- [Cards](/components/cards/accessibility.md): Cards display content and actions about a single subject.

#### Carousel

- [Carousel](/components/carousel/overview.md): Carousels show a collection of items that can be scrolled on and off the screen. Contain visual items like images or video, along with optional label text.
- [Carousel](/components/carousel/specs.md): Carousels show a collection of items that can be scrolled on and off the screen. Contain visual items like images or video, along with optional label text.
- [Carousel](/components/carousel/guidelines.md): Carousels show a collection of items that can be scrolled on and off the screen. Contain visual items like images or video, along with optional label text.
- [Carousel](/components/carousel/accessibility.md): Carousels show a collection of items that can be scrolled on and off the screen. Contain visual items like images or video, along with optional label text.

#### Checkbox

- [Checkbox](/components/checkbox/overview.md): Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.
- [Checkbox](/components/checkbox/specs.md): Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.
- [Checkbox](/components/checkbox/guidelines.md): Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.
- [Checkbox](/components/checkbox/accessibility.md): Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.

#### Chips

- [Chips](/components/chips/overview.md): Chips help people enter information, make selections, filter content, or trigger actions. Use chips to show options for a specific context.
- [Chips](/components/chips/specs.md): Chips help people enter information, make selections, filter content, or trigger actions. Use chips to show options for a specific context.
- [Chips](/components/chips/guidelines.md): Chips help people enter information, make selections, filter content, or trigger actions. Use chips to show options for a specific context.
- [Chips](/components/chips/accessibility.md): Chips help people enter information, make selections, filter content, or trigger actions. Use chips to show options for a specific context.

#### Date & time pickers

- [Date pickers](/components/date-pickers/overview.md): Date pickers let people select a date, or a range of dates. Date pickers can display past, present, or future dates.
- [Time pickers](/components/time-pickers/overview.md): Time pickers help users select and set a specific time. There are two types of time pickers: dial and input.

##### Date pickers

- [Date pickers](/components/date-pickers/overview.md): Date pickers let people select a date, or a range of dates. Date pickers can display past, present, or future dates.
- [Date pickers](/components/date-pickers/specs.md): Date pickers let people select a date, or a range of dates. Date pickers can display past, present, or future dates.
- [Date pickers](/components/date-pickers/guidelines.md): Date pickers let people select a date, or a range of dates. Date pickers can display past, present, or future dates.
- [Date pickers](/components/date-pickers/accessibility.md): Date pickers let people select a date, or a range of dates. Date pickers can display past, present, or future dates.

##### Time pickers

- [Time pickers](/components/time-pickers/overview.md): Time pickers help users select and set a specific time. There are two types of time pickers: dial and input.
- [Time pickers](/components/time-pickers/specs.md): Time pickers help users select and set a specific time. There are two types of time pickers: dial and input.
- [Time pickers](/components/time-pickers/guidelines.md): Time pickers help users select and set a specific time. There are two types of time pickers: dial and input.
- [Time pickers](/components/time-pickers/accessibility.md): Time pickers help users select and set a specific time. There are two types of time pickers: dial and input.

#### Dialogs

- [Dialogs](/components/dialogs/overview.md): Dialogs provide important prompts in a user flow. Use dialogs to make sure users act on information
- [Dialogs](/components/dialogs/specs.md): Dialogs provide important prompts in a user flow. Use dialogs to make sure users act on information
- [Dialogs](/components/dialogs/guidelines.md): Dialogs provide important prompts in a user flow. Use dialogs to make sure users act on information
- [Dialogs](/components/dialogs/accessibility.md): Dialogs provide important prompts in a user flow. Use dialogs to make sure users act on information

#### Divider

- [Divider](/components/divider/overview.md): A divider is a thin line that groups content in lists and containers.
- [Divider](/components/divider/specs.md): A divider is a thin line that groups content in lists and containers.
- [Divider](/components/divider/guidelines.md): A divider is a thin line that groups content in lists and containers.
- [Divider](/components/divider/accessibility.md): A divider is a thin line that groups content in lists and containers.

#### Lists

- [Lists](/components/lists/overview.md): Lists are continuous, vertical indexes of text or images.
- [Lists](/components/lists/specs.md): Lists are continuous, vertical indexes of text or images.
- [Lists](/components/lists/guidelines.md): Lists are continuous, vertical indexes of text or images.
- [Lists](/components/lists/accessibility.md): Lists are continuous, vertical indexes of text or images.

#### Loading & progress

- [Loading indicator](/components/loading-indicator/overview.md): Loading indicators show the progress of a process for a short wait time
- [Progress indicators](/components/progress-indicators/overview.md): Progress indicators inform users about the status of ongoing processes, such as loading an app. It show the status of a process in real time.

##### Loading indicator

- [Loading indicator](/components/loading-indicator/overview.md): Loading indicators show the progress of a process for a short wait time
- [Loading indicator](/components/loading-indicator/specs.md): Loading indicators show the progress of a process for a short wait time
- [Loading indicator](/components/loading-indicator/guidelines.md): Loading indicators show the progress of a process for a short wait time
- [Loading indicator](/components/loading-indicator/accessibility.md): Loading indicators show the progress of a process for a short wait time

##### Progress indicators

- [Progress indicators](/components/progress-indicators/overview.md): Progress indicators inform users about the status of ongoing processes, such as loading an app. It show the status of a process in real time.
- [Progress indicators](/components/progress-indicators/specs.md): Progress indicators inform users about the status of ongoing processes, such as loading an app. It show the status of a process in real time.
- [Progress indicators](/components/progress-indicators/guidelines.md): Progress indicators inform users about the status of ongoing processes, such as loading an app. It show the status of a process in real time.
- [Progress indicators](/components/progress-indicators/accessibility.md): Progress indicators inform users about the status of ongoing processes, such as loading an app. It show the status of a process in real time.

#### Menus

- [Menus](/components/menus/overview.md): Menus display a list of choices on a temporary surface. Menus can open from a variety of components, including icon buttons and text fields.
- [Menus](/components/menus/specs.md): Menus display a list of choices on a temporary surface. Menus can open from a variety of components, including icon buttons and text fields.
- [Menus](/components/menus/guidelines.md): Menus display a list of choices on a temporary surface. Menus can open from a variety of components, including icon buttons and text fields.
- [Menus](/components/menus/accessibility.md): Menus display a list of choices on a temporary surface. Menus can open from a variety of components, including icon buttons and text fields.

#### Navigation

- [Navigation bar](/components/navigation-bar/overview.md): Navigation bars let people switch between UI views on smaller devices. They’re a common navigation component on handheld screens.
- [Navigation drawer](/components/navigation-drawer/overview.md): Navigation drawers let people switch between UI views on larger devices. Navigation drawers provide access to destinations in your app.
- [Navigation rail](/components/navigation-rail/overview.md): Navigation rails let people switch between UI views on mid-sized devices. They can contain 3-7 destinations plus an optional FAB.

##### Navigation bar

- [Navigation bar](/components/navigation-bar/overview.md): Navigation bars let people switch between UI views on smaller devices. They’re a common navigation component on handheld screens.
- [Navigation bar](/components/navigation-bar/specs.md): Navigation bars let people switch between UI views on smaller devices. They’re a common navigation component on handheld screens.
- [Navigation bar](/components/navigation-bar/guidelines.md): Navigation bars let people switch between UI views on smaller devices. They’re a common navigation component on handheld screens.
- [Navigation bar](/components/navigation-bar/accessibility.md): Navigation bars let people switch between UI views on smaller devices. They’re a common navigation component on handheld screens.

##### Navigation drawer

- [Navigation drawer](/components/navigation-drawer/overview.md): Navigation drawers let people switch between UI views on larger devices. Navigation drawers provide access to destinations in your app.
- [Navigation drawer](/components/navigation-drawer/specs.md): Navigation drawers let people switch between UI views on larger devices. Navigation drawers provide access to destinations in your app.
- [Navigation drawer](/components/navigation-drawer/guidelines.md): Navigation drawers let people switch between UI views on larger devices. Navigation drawers provide access to destinations in your app.
- [Navigation drawer](/components/navigation-drawer/accessibility.md): Navigation drawers let people switch between UI views on larger devices. Navigation drawers provide access to destinations in your app.

##### Navigation rail

- [Navigation rail](/components/navigation-rail/overview.md): Navigation rails let people switch between UI views on mid-sized devices. They can contain 3-7 destinations plus an optional FAB.
- [Navigation rail](/components/navigation-rail/specs.md): Navigation rails let people switch between UI views on mid-sized devices. They can contain 3-7 destinations plus an optional FAB.
- [Navigation rail](/components/navigation-rail/guidelines.md): Navigation rails let people switch between UI views on mid-sized devices. They can contain 3-7 destinations plus an optional FAB.
- [Navigation rail](/components/navigation-rail/accessibility.md): Navigation rails let people switch between UI views on mid-sized devices. They can contain 3-7 destinations plus an optional FAB.

#### Radio button

- [Radio button](/components/radio-button/overview.md): Radio buttons allow users to select one option from a set.
- [Radio button](/components/radio-button/specs.md): Radio buttons allow users to select one option from a set.
- [Radio button](/components/radio-button/guidelines.md): Radio buttons allow users to select one option from a set.
- [Radio button](/components/radio-button/accessibility.md): Radio buttons allow users to select one option from a set.

#### Search

- [Search](/components/search/overview.md): Search lets people enter a keyword or phrase to get relevant information. Search bars can display suggested keywords or phrases as the user types.
- [Search](/components/search/specs.md): Search lets people enter a keyword or phrase to get relevant information. Search bars can display suggested keywords or phrases as the user types.
- [Search](/components/search/guidelines.md): Search lets people enter a keyword or phrase to get relevant information. Search bars can display suggested keywords or phrases as the user types.
- [Search](/components/search/accessibility.md): Search lets people enter a keyword or phrase to get relevant information. Search bars can display suggested keywords or phrases as the user types.

#### Sheets

- [Bottom sheets](/components/bottom-sheets/overview.md): Bottom sheets are surfaces containing supplementary content, anchored to the bottom of the screen.
- [Side sheets](/components/side-sheets/overview.md): Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.

##### Bottom sheets

- [Bottom sheets](/components/bottom-sheets/overview.md): Bottom sheets are surfaces containing supplementary content, anchored to the bottom of the screen.
- [Bottom sheets](/components/bottom-sheets/specs.md): Bottom sheets are surfaces containing supplementary content, anchored to the bottom of the screen.
- [Bottom sheets](/components/bottom-sheets/guidelines.md): Bottom sheets are surfaces containing supplementary content, anchored to the bottom of the screen.
- [Bottom sheets](/components/bottom-sheets/accessibility.md): Bottom sheets are surfaces containing supplementary content, anchored to the bottom of the screen.

##### Side sheets

- [Side sheets](/components/side-sheets/overview.md): Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.
- [Side sheets](/components/side-sheets/specs.md): Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.
- [Side sheets](/components/side-sheets/guidelines.md): Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.
- [Side sheets](/components/side-sheets/accessibility.md): Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.

#### Sliders

- [Sliders](/components/sliders/overview.md): Sliders let users make selections from a range of values. There are four configurations: continuous, discrete, centered, range selection.
- [Sliders](/components/sliders/specs.md): Sliders let users make selections from a range of values. There are four configurations: continuous, discrete, centered, range selection.
- [Sliders](/components/sliders/guidelines.md): Sliders let users make selections from a range of values. There are four configurations: continuous, discrete, centered, range selection.
- [Sliders](/components/sliders/accessibility.md): Sliders let users make selections from a range of values. There are four configurations: continuous, discrete, centered, range selection.

#### Snackbar

- [Snackbar](/components/snackbar/overview.md): Snackbars provide brief messages about app processes at the bottom of the screen.
- [Snackbar](/components/snackbar/specs.md): Snackbars provide brief messages about app processes at the bottom of the screen.
- [Snackbar](/components/snackbar/guidelines.md): Snackbars provide brief messages about app processes at the bottom of the screen.
- [Snackbar](/components/snackbar/accessibility.md): Snackbars provide brief messages about app processes at the bottom of the screen.

#### Switch

- [Switch](/components/switch/overview.md): Switches toggle the selection of an item on or off. Switches are the best way to let users adjust settings.
- [Switch](/components/switch/specs.md): Switches toggle the selection of an item on or off. Switches are the best way to let users adjust settings.
- [Switch](/components/switch/guidelines.md): Switches toggle the selection of an item on or off. Switches are the best way to let users adjust settings.
- [Switch](/components/switch/accessibility.md): Switches toggle the selection of an item on or off. Switches are the best way to let users adjust settings.

#### Tabs

- [Tabs](/components/tabs/overview.md): Tabs organize content across different screens, data sets, and other interactions.
- [Tabs](/components/tabs/specs.md): Tabs organize content across different screens, data sets, and other interactions.
- [Tabs](/components/tabs/guidelines.md): Tabs organize content across different screens, data sets, and other interactions.
- [Tabs](/components/tabs/accessibility.md): Tabs organize content across different screens, data sets, and other interactions.

#### Text fields

- [Text fields](/components/text-fields/overview.md): Text fields let users enter text into a UI. They typically appear in forms and dialogs.
- [Text fields](/components/text-fields/specs.md): Text fields let users enter text into a UI. They typically appear in forms and dialogs.
- [Text fields](/components/text-fields/guidelines.md): Text fields let users enter text into a UI. They typically appear in forms and dialogs.
- [Text fields](/components/text-fields/accessibility.md): Text fields let users enter text into a UI. They typically appear in forms and dialogs.

#### Toolbars

- [Toolbars](/components/toolbars/overview.md): Toolbars display frequently used actions relevant to the current page.
- [Toolbars](/components/toolbars/specs.md): Toolbars display frequently used actions relevant to the current page.
- [Toolbars](/components/toolbars/guidelines.md): Toolbars display frequently used actions relevant to the current page.
- [Toolbars](/components/toolbars/accessibility.md): Toolbars display frequently used actions relevant to the current page.

#### Tooltips

- [Tooltips](/components/tooltips/overview.md): Tooltips display brief labels or messages. Tooltips are informative, specific, and action-oriented text labels that provide contextual support
- [Tooltips](/components/tooltips/specs.md): Tooltips display brief labels or messages. Tooltips are informative, specific, and action-oriented text labels that provide contextual support
- [Tooltips](/components/tooltips/guidelines.md): Tooltips display brief labels or messages. Tooltips are informative, specific, and action-oriented text labels that provide contextual support
- [Tooltips](/components/tooltips/accessibility.md): Tooltips display brief labels or messages. Tooltips are informative, specific, and action-oriented text labels that provide contextual support

### Develop

- [Develop](/develop.md): Implement Material Design with code and developer documentation for Jetpack Compose, Android Views, Flutter, and the web
- [Flutter](/develop/flutter.md): A framework for building beautiful, natively compiled applications from a single codebase. Support is available for Material Design 3.
- [Web](/develop/web.md): Material Web is Google’s component library for building applications that work in any web framework.

#### Android

- [Android Views (MDC-Android)](/develop/android/mdc-android.md): Modular and customizable code for building Android products.
- [Jetpack Compose](/develop/android/jetpack-compose.md): Android's modern toolkit for building native UI using Material 3

### Other

- [Attribution](/ATTRIBUTION.md)