Material Compose

Alert dialogs interrupt users with urgent information, details, or actions.

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.

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

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

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

The recommended configuration for a BottomNavigationItem depends on how many items there are inside a BottomNavigation: - Three destinations: Display icons and text labels for all…

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

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

Cards contain content and actions about a single subject.

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

Action chips offer actions related to primary content.

Determinate Material Design circular progress indicator.

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

A dropdown menu is a compact way of displaying multiple choices.

Box for Exposed Dropdown Menu.

The extended FAB is wider than a regular FAB, and it includes a text label.

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

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.

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

Determinate Material Design linear progress indicator.

Lists are continuous, vertical indexes of text or images.

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

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

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

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

A NavigationRailItem always shows text labels (if it exists) when selected.

Outlined buttons are medium-emphasis buttons.

Text fields allow users to enter text into a UI.

Outlined text fields have less visual emphasis than filled text fields.

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.

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.

Scaffold implements the basic Material Design visual layout structure.

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

Text fields allow users to enter text into a UI.

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

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 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.

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

Fixed tabs display all tabs in a set simultaneously.

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

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

Filled text fields have more visual emphasis than outlined text fields, making them stand out when surrounded by other content and components.

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

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