Displaying the full name of a person in an interface can take up way more space than needed and can disrupt rhythm. Use avatars in place of a user’s name (but include the name in content readable by assistive technology).
Buttons have the most options of any other components to allow for different colors, shapes, and sizes.
Button groups push multiple buttons together to form a single component. These are a great alternative to tabs.
Cards are versatile content structures that provide an entry point to more complex and detailed information.
Dates might be your most common data point in your apps. The date component gives you a way to display a month and day in a non-typical way.
Dialogs inform users about critical information, require users to make decisions, or encapsulate multiple tasks within a discrete process. Use dialogs sparingly because they are interruptive in nature–their sudden appearance forces users to stop their current task and refocus on the dialog content. Not every choice, setting, or detail warrants such interruption and prominence.
A drawer is a component that allows for content to be hidden until triggered at which point the content will slide from either the left or right of the viewport and block all other page content, similar to a dialog.
Help launchers are small buttons typically aligned in the lower right corner of the browser's viewport that provide a link to help or documentation about the current product.
Icons are square elements that represent an available action to the user. Icons are imported from a single SVG file and included on the page as SVG elements.
Your app wouldn't be complete if you didn't have a couple of lists thrown in there. Use lists for displaying small menus or contextual information about a subject contained in a card.
A group of messages is meant to form a conversation. The way that conversations are represented inside of apps, regardless of platform, should be consistent.
The pagination component provides a way to navigate between discrete pages of a single subject.
Make loading content in your app as delightful and painless as possible by minimizing the amount of visual change a user sees before they can view and interact with content.
Tabs allow users to quickly move between a small number of equally important views. Use tabs to organize content at a high level.
Thumbnails are small images, similar to avatars, used inline with text in lists, paragraphs, or just about any layout component.
Toasts are a great way to inform your users that a specific action was successful. A toast should appear when it is not obvious that a specific action was successful, such as saving a change or marking an ad as active.
Tooltips are labels that appear on hover and focus when the user hovers over an element with the cursor, focuses on an element using a keyboard, or in touch UI upon touch (without releasing). They contain textual identification for the element in question.