spark

App bars display navigation controls and key actions at the top or bottom of a screen. Use them to give users consistent access to navigation and contextual actions across your app.

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.

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

Cards contain content and actions that relate information about a subject. They provide visual separation from the background and can be static or interactive.

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

The dialog package provides two composables: AlertDialog for concise confirmations and ModalScaffold for full-screen flows with top/bottom app bars and scrollable 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.

File upload components allow users to select, upload, and preview files such as images or documents.

SegmentedGauge is a non-interactive visual indicator made up of colored segments. It shows a level or value along a scale (e.g., from "low" to "high"). The gauge is used to visually illustrate the quality of an abstract element (e.g., contact, pricing, rating, etc.). It has a limited granularity (between 3 and 5 colored cells) to help users instantly understand the value of the associated element.

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:

The image package provides three composables for displaying visual content: Image for remote/async images with managed loading states, Illustration for local static assets, and UserAvatar for circular profile pictures.

Placeholders display skeleton UI whilst content is loading. They occupy the same space as the real content and cross-fade out once data is ready, reducing perceived wait time.

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.

Rating components display or collect a 1-5 star score. Use display variants to show existing scores and RatingInput to let users submit their own.

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.

Steppers let users increment and decrement a numeric value within a defined range using decrease/increase buttons on either side of the current value.

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.

Checkboxes allows users to select one or more items from a set. Checkboxes can turn an option on or off.