Material 3 Compose

Dialogs provide important prompts in a user flow.

An `AppBarColumn` arranges its children in a vertical sequence, and if any children overflow the constraints, an overflow indicator is displayed.

Default overflow indicator for an `AppBarRow` and `AppBarColumn`.

An `AppBarRow` arranges its children in a horizontal sequence, and if any children overflow the constraints, an overflow indicator is displayed.

A search bar represents a field that allows users to enter a keyword or phrase and get relevant information.

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

A badge represents dynamic information such as a number of pending requests in a navigation bar.

Material Design badge box.

Dialogs provide important prompts in a user flow.

A bottom app bar displays navigation and key actions at the bottom of small screens.

Modal bottom sheets are used as an alternative to inline menus or simple dialogs on mobile, especially when offering a long list of action items, or when items require longer desc…

Standard bottom sheets co-exist with the screen’s main UI region and allow for simultaneously viewing and interacting with both regions.

Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.

A layout composable that places its children in a horizontal sequence.

Cards contain contain content and actions that relate information about a subject.

Top app bars display information and actions at the top of a screen.

Checkboxes allow users to select one or more items from a set.

Progress indicators express an unspecified wait time or display the duration of a process.

Progress indicators express an unspecified wait time or display the duration of a process.

A Material Design contained loading indicator.

Date pickers let people select a date and preferably should be embedded into Dialogs.

A dialog for displaying a `DatePicker`.

Date range pickers let people select a range of dates and can be embedded into Dialogs.

Content inside of a dismissible navigation drawer.

Navigation drawers provide ergonomic access to destinations in an app.

A search bar represents a floating search field that allows users to enter a keyword or phrase and get relevant information.

Menus display a list of choices on a temporary surface.

A composable for creating a visually distinct group within a `DropdownMenuPopup`.

Menus display a list of choices on a temporary surface.

A `Popup` that provides the foundation for building a custom menu.

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

Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.

Elevated cards contain content and actions that relate information about a subject.

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

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

Toggle button is a toggleable button that switches between primary and tonal colors depending on `checked`'s value.

`ExpandedDockedSearchBar` represents a search bar that is currently expanding or in the expanded state, showing search results.

`ExpandedDockedSearchBarWithGap` represents a search bar that is currently expanding or in the expanded state, showing search results.

`ExpandedFullScreenContainedSearchBar` represents a search bar that is currently expanding or in the expanded state, showing search results, preserving the collapsed shape of the…

`ExpandedFullScreenSearchBar` represents a search bar that is currently expanding or in the expanded state, showing search results.

Menus display a list of choices on a temporary surface.

Extended FABs help people take primary actions.

Icon buttons help people take supplementary actions with a single tap.

Icon buttons help people take supplementary actions with a single tap.

Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.

Icon buttons help people take supplementary actions with a single tap.

Icon buttons help people take supplementary actions with a single tap.

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

A flexible bottom app bar displays navigation and key actions at the bottom of small screens.

The FAB represents the most important action on a screen.

FAB Menus should be used in conjunction with a `ToggleFloatingActionButton` to provide additional choices to the user after clicking a FAB.

FAB Menu Items should be used within a `FloatingActionButtonMenu` to provide additional choices to the user after clicking a FAB.

A horizontal carousel that centers at least one large item between two small items.

A divider is a thin line that groups content in lists and layouts.

A horizontal floating toolbar displays navigation and key actions in a `Row`.

A horizontal carousel meant to display many items at once for quick browsing of smaller content like album art or photo thumbnails.

A horizontal carousel that displays its items with the given size except for one item at the end that is cut off.

A Material Design icon component that draws `imageVector` using `tint`, with a default value of `LocalContentColor`.

Icon buttons help people take supplementary actions with a single tap.

Icon buttons help people take supplementary actions with a single tap.

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

Label component that will append a `label` to `content`.

Extended FABs help people take primary actions.

Top app bars display information and actions at the top of a screen.

The FAB represents the most important action on a screen.

Top app bars display information and actions at the top of a screen.

Tabs organize content across different screens, data sets, and other interactions.

Progress indicators express an unspecified wait time or display the duration of a process.

Progress indicators express an unspecified wait time or display the duration of a process.

Lists are continuous, vertical indexes of text or images.

A Material Design loading indicator.

Material Expressive Theming refers to the customization of your Material Design app to better reflect your product’s brand.

Material Theming refers to the customization of your Material Design app to better reflect your product’s brand.

Extended FABs help people take primary actions.

Top app bars display information and actions at the top of a screen.

The FAB represents the most important action on a screen.

Top app bars display information and actions at the top of a screen.

Modal bottom sheets are used as an alternative to inline menus or simple dialogs on mobile, especially when offering a long list of action items, or when items require longer desc…

Content inside of a modal navigation drawer.

Navigation drawers provide ergonomic access to destinations in an app.

Material design modal wide navigation rail.

Creates a multi-apsect carousel scope that includes all related methods for creating a multi-aspect carousel.

A Layout to correctly position, size, and add semantics to `SegmentedButton`s in a Row.

Navigation bars offer a persistent and convenient way to switch between primary destinations in an app.

Material Design navigation bar item.

Material Design navigation drawer item.

Navigation rails provide access to primary destinations in apps when using tablet and desktop screens.

Material Design navigation rail item.

Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.

Outlined cards contain content and actions that relate information about a subject.

Icon buttons help people take supplementary actions with a single tap.

Icon buttons help people take supplementary actions with a single tap.

Text fields allow users to enter text into a UI.

Text fields allow users to enter text into a UI.

Toggle button is a toggleable button that switches between primary and tonal colors depending on `checked`'s value.

Content inside of a permanent navigation drawer.

Navigation drawers provide ergonomic access to destinations in an app.

Plain tooltip that provides a descriptive message.

Primary tabs are placed at the top of the content pane under a top app bar.

Primary tabs are placed at the top of the content pane under a top app bar.

This function is used to set the current value of `LocalTextStyle`, merging the given style with the current style values for any missing attributes.

`PullToRefreshBox` is a container that expects a scrollable layout as content and adds gesture support for manually refreshing when the user swipes downward at the beginning of th…

Radio buttons allow users to select one option from a set.

Range Sliders expand upon `Slider` using the same concepts but allow the user to select 2 values.

Rich text tooltip that allows the user to pass in a title, text, and action.

Scaffold implements the basic Material Design visual layout structure.

A Scrim that obscures content behind a modal surface.

Material Design scrollable tabs.

A search bar represents a field that allows users to enter a keyword or phrase and get relevant information.

Material Design scrollable tabs.

Secondary tabs are used within a content area to further separate related content and establish hierarchy.

Text fields allow users to enter text into a UI.

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

Lists are continuous, vertical indexes of text or images.

Material Design short navigation bar.

Material Design short navigation bar item.

A Layout to correctly position and size `SegmentedButton`s in a Row.

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

Extended FABs help people take primary actions.

The FAB represents the most important action on a screen.

Snackbars provide brief messages about app processes at the bottom of the screen.

Host for `Snackbar`s to be used in `Scaffold` to properly show, hide and dismiss items based on Material specification and the `hostState`.

A `SplitButtonLayout` let user define a button group consisting of 2 buttons.

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

Material surface is the central metaphor in material design.

A composable that can be dismissed by swiping left or right.

Switches toggle the state of a single item on or off.

A default Tab, also known as a Primary Navigation Tab.

Material Design fixed tabs.

High level element that displays text and provides semantics / accessibility information.

Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.

Text fields allow users to enter text into a UI.

Time pickers help users select and set a specific time.

Time pickers help users select and set a specific time.

A dialog for displaying a `TimePicker`.

Toggle button is a toggleable button that switches between primary and tonal colors depending on `checked`'s value.

Toggleable FAB supports animating its container size, corner radius, and color when it is toggled, and should be used in conjunction with a `FloatingActionButtonMenu` to provide a…

Toggle button is a toggleable button that switches between primary and tonal colors depending on `checked`'s value.

Material TooltipBox that wraps a composable with a tooltip.

Top app bars display information and actions at the top of a screen.

A search bar represents a field that allows users to enter a keyword or phrase and get relevant information.

Checkboxes can have a parent-child relationship with other checkboxes.

A basic two-rows Material Design top app bar.

A divider is a thin line that groups content in lists and layouts.

A drag handle is a capsule-like shape that can be used by users to change component size and/or position by dragging.

A vertical floating toolbar displays navigation and key actions in a `Column`.

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

Material design wide navigation rail.

Material Design wide navigation rail item.