spark

Badges convey dynamic information, such as counts or status. A badge can include labels or numbers.

BottomSheet A bottom sheet is a UI component commonly used in mobile applications to present additional content or options from the bottom of the screen. It is a modal component that slides up from the bottom of the screen and covers the entire screen.

Buttons help people take action, such as sending an email, sharing a document, or liking a comment. Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:

Chips help users quickly recognize an important information that has been entered by them, trigger actions, make selections, or filter content.

Dividers The Divider component provides a thin, unobtrusive line that separates and distinguishes sections of content to reinforce visual hierarchy.
A few common uses are: Separating sections on a page. Creating a visual contrast between 2 sides of a page.

IconToggleButtons take supplementary actions with a single tap. They’re used when a compact button is required, such as in a toolbar or image list.

The Icon component display any Icon coming from either of these sources:

TextLink A TextLink is a reference to a resource.

Spinners express an unspecified amount of wait time. They should be used when progress isn’t detectable, or if it’s not necessary to indicate how long an activity will take.

ProgressTracker is a visual navigation element typically used to display progress or guide user through a multi-step process.

Proressbar The progress bar component is used to display the length and your progression inside the process or to express a waiting time. This waiting time can be either determinate or indeterminate.

Sliders A slider is an interactive component that allows users to set values by moving a handle within a defined range.

Snackbars inform users of a process that an app has performed or will perform They appear temporarily, towards the bottom of the screen. They should not interrupt the user experience, and they don’t require user input to disappear. Only one snackbar may be displayed at a time.

Tabs are used to group different but related content, allowing users to navigate views without leaving the page. They always contain at least two items and one tab is active at a time. Tabs can be used on full page layouts or in components such as modals, cards, or side panels.

Tags are used to label content and help users quickly recognize info about them: Categories, Status… Can be applied with different colors and designs that are associated with a content due to its characteristics: new content, unvisited content, featured content… Users can’t interact with Tags.

Dropdown allow users to select an option from a dropdown.

Switches can be used in forms on a full page, in modals, or on side panels. They can be used in a list but we shouldn’t mix them with other components such as ./CheckBox.md or ./RadioButton.md.