Material Compose

Material Design backdrop A backdrop appears behind all other surfaces in an app, displaying contextual and actionable content.

Badge is a component that can contain dynamic information, such as the presence of a new notification or a number of pending requests.

A BadgeBox is used to decorate content with a badge that can contain dynamic information, such as the presence of a new notification or a number of pending requests.

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

Material Design bottom navigation drawer Bottom navigation drawers are modal drawers that are anchored to the bottom of the screen instead of the left or right edge.

Material Design bottom navigation Bottom navigation bars allow movement between primary destinations in an app.

Material Design bottom navigation The recommended configuration for a BottomNavigationItem depends on how many items there are inside a BottomNavigation: - Three destinations: Dis…

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

Material Design contained button Contained buttons are high-emphasis, distinguished by their use of elevation and fill.

Material Design card Cards contain content and actions about a single subject.

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

Material Design action chip.

Determinate <a href="https://material.io/components/progress-indicators#circular-progress-indicators" class="external" target="_blank">Material Design circular progress indicator<…

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

Material Design Exposed Dropdown Menu.

Material Design extended floating action button The extended FAB is wider than a regular FAB, and it includes a text label.

Material Design filter chip Filter chips use tags or descriptive words to filter a collection.

Material Design floating action button A floating action button (FAB) represents the primary action of a screen.

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

IconButton is a clickable icon, used to represent actions.

An IconButton with two states, for icons that can be toggled 'on' and 'off', such as a bookmark icon, or a navigation icon that opens a drawer.

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

Determinate <a href="https://material.io/components/progress-indicators#linear-progress-indicators" class="external" target="_blank">Material Design linear progress indicator</a>.

Material Design list Lists are continuous, vertical indexes of text or images.

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

Material Design modal bottom sheet Modal bottom sheets present a set of choices while blocking interaction with the rest of the screen.

Material Design modal navigation drawer Modal navigation drawers block interaction with the rest of an app’s content with a scrim.

Material Design navigation rail A Navigation Rail is a side navigation component that allows movement between primary destinations in an app.

Material Design navigation rail A NavigationRailItem always shows text labels (if it exists) when selected.

Material Design outlined button Outlined buttons are medium-emphasis buttons.

Material Design outlined text field for secure content Text fields allow users to enter text into a UI.

Material Design outlined text field.

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

The default indicator for Compose pull-to-refresh, based on Android's SwipeRefreshLayout.

Material Design radio button Radio buttons allow users to select one option from a set.

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

Material Design layout Scaffold implements the basic Material Design visual layout structure.

Material Design scrollable tabs When a set of tabs cannot fit on screen, use scrollable tabs.

Material Design filled text field for secure content Text fields allow users to enter text into a UI.

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

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

Host for Snackbars to be used in Scaffold to properly show, hide and dismiss items based on material specification and the hostState.

Material Design surface Material surface is the central metaphor in material design.

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

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

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

Material Design fixed tabs Fixed tabs display all tabs in a set simultaneously.

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

Material Design text button Text buttons are typically used for less-pronounced actions, including those located in dialogs and cards.

Material Design filled text field.

Material Design top app bar The top app bar displays information and actions relating to the current screen.

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