![Banner for Material
Components](https://developer.android.com/static/images/design/ui/mobile/material-components-hero.png)

A design system is a collection of reusable design decisions expressed as
guidance, components, and patterns. The system can be broken down into smallest
design primitives: things like color, type, or shape which build into larger
complex component pieces. For example, an icon and text label make up a button
component, while multiple buttons and a surface make up a card. Design systems
also come with a set of guidance composed of these existing design decisions
around the components and patterns.

Material Design is an open-source design system developed by Google to help you
build beautiful user-focused products. Material 3 is the latest iteration of
Material Design.

## Material Design Components

Material Design provides an array of code-backed [components](https://m3.material.io/components)
that are interactive building blocks for creating a user interface. These components
can be organized into five categories based on their purpose:
action, containment, navigation, selection, and text input.

### Action components

Action components help people achieve an aim.

Material has multiple types of [buttons](https://m3.material.io/components/buttons/overview) to help define priority
of actions and interaction in different contexts. From [FABs](https://m3.material.io/components/floating-action-button/overview) or
[extended FABs](https://m3.material.io/components/extended-fab/overview) for primary actions to supporting [icon
buttons](https://m3.material.io/components/icon-buttons/overview) to selecting options with [segmented
buttons](https://m3.material.io/components/segmented-buttons/overview).
![](https://developer.android.com/static/images/design/ui/mobile/material-components-action-components.png) **Figure 1:** Action Components

### Communication components

Communication components provide helpful information, by alerting users with
[badges](https://m3.material.io/components/badges), informing of status through [progress
indicators](https://m3.material.io/components/progress-indicators), and providing brief process messages with
[snackbars](https://m3.material.io/components/snackbar).
![](https://developer.android.com/static/images/design/ui/mobile/material-components-communication.png) **Figure 2:** Communication

### Containment components

Containment components hold information and actions -- including other
components like buttons, menus, or chips. Most Material components use explicit
containment, grouping together related content and actions with visual objects:
[cards](https://m3.material.io/components/cards), [dialogs](https://m3.material.io/components/dialogs), [bottom
sheets](https://m3.material.io/components/bottom-sheets), [side sheets](https://m3.material.io/components/side-sheets),
[carousels](https://m3.material.io/components/carousel), and [tooltips](https://m3.material.io/components/tooltips).
[Lists](https://m3.material.io/components/lists) can be provided with implicit containment or explicit by
showing visible [dividers](https://m3.material.io/components/divider). These components provide common
patterns for displaying groups of content.
![](https://developer.android.com/static/images/design/ui/mobile/material-components-containment.png) **Figure 3:** Containment

### Navigation components

Navigation components help people move through the UI. For mobile, the
[navigation bar](https://m3.material.io/components/navigation-bar) or [navigation drawer](https://m3.material.io/components/navigation-drawer)
contain your primary navigation destinations. [Tabs](https://m3.material.io/components/tabs),
[the bottom app bar](https://m3.material.io/components/bottom-app-bar), and [the top app bar](https://m3.material.io/components/top-app-bar)
provide different ways to navigate supporting information
and actions. Read more about how to work with
navigation within your [layouts](https://developer.android.com/design/ui/mobile/guides/layout-and-content/layout-basics).
![](https://developer.android.com/static/images/design/ui/mobile/material-components-navigation.png) **Figure 4:** Navigation

### Selection components

Selection components let people specify choices. Whether building out a form
with [checkboxes](https://m3.material.io/components/checkbox) and [radio buttons](https://m3.material.io/components/radio-button), filtering
using [chips](https://m3.material.io/components/chips), or toggling settings with
[switches](https://m3.material.io/components/switch) and [sliders](https://m3.material.io/components/sliders), selection components
allow users to control and input their decisions.
![](https://developer.android.com/static/images/design/ui/mobile/material-components-selection.png) **Figure 5:** Selection

### Text input components

Text input components let people enter and edit text. [Text
fields](https://m3.material.io/components/text-fields) allow users to enter text into a UI.
![](https://developer.android.com/static/images/design/ui/mobile/material-components-text-input.png) **Figure 6:** Text Input

## Design systems for Compose

Read [Design systems in Compose](https://developer.android.com/jetpack/compose/designsystems) for details about how to use Compose to
more smoothly implement a design system and give your app a consistent look and
feel with theming, components, and other aspects of the design system.