Avatar
An avatar is an element that can be used to personalize a display (for example, to display an image or the initials of a user) or to act as signals to indicate the status of content. You can include a link with the avatar so that if a user clicks on it, they can go to a different URL.
Badge
A badge is a visual status indicator or description of an associated component.
Banner
A Banner is displayed when a user lands on a page to provide a message or greeting. The user can simply click on the banner to remove it.
Breadcrumb
A breadcrumb provides links back to previous pages which the user navigated through. Typically, this useful in a hierarchic structure, where the user can see the current page and the pages further up the structure.
Card
A card displays a set of content separate from other content on the screen.
Disclosure
A disclosure component is the implementation of native details and summary controls, which toggles the visibility of the extra content. Visually, it can look like a button or a hyperlink beneath extra content.
Divider
This component shows a simple horizontal line to separate different content.
Horizontal scroll
The horizontal scroller provides an alternative to a horizontal scroll bar. When the screen space is not wide enough to display the whole the of the content, a right arrow (a flipper) is displayed on the right side of the content. The user can click on the arrow to move to the right.
Icon
This component enables you to show an icon.
Presentation
Progress
A progress component displays a horizontal linear indicator of an action in progress.
Progress ring
A progress ring displays a circular indicator that an action is in progress.
Skeleton
The skeleton component shows a visual placeholder for an element while it is in a loading state. This is usually presented as a simplified wireframe-like version of the UI that it is representing.