📄️ Windows
Window
📄️ App Bar
App Bar
📄️ Bottom Bar
A Bottom Bar is used to store all the action buttons that the View needs and optionally a title and description that describe the view's contents instead of titling the view itself.
📄️ Sidebars
A sidebar is a complementary component in your app, and it has an App Bar of its own on top, and elements below it. It also has a obligatory Sidebar Title using View Title typography rules.
📄️ Views
A View is the main door to your app's content. It displays what the app's aim is for. Views should contain a label that titles it, using the View Title typography style. This Title should be concise and not go over 3 words. Views can also contain a simple description below the View Title, spaced by 6 units, and styled with View Subtitle typography style.
📄️ View Switcher
The View Switcher is used when there are multiple views in your app. It displays each View's title which are clickable to navigate to that View.
📄️ Content Block
Content Block
📄️ Content List
A Content List is a grouping of Content Blocks that share the same purpose, and have an optional header that uses the Heading Typography class, and a description that uses Body Typography class.
📄️ Buttons
The Button is the main component enabling users to interact with your app. Each View should contain at least one prominent button for the primary action. This button should command the most attention from the user. The arrangement of other buttons in the View should show that this one is the most important action. The button is always spaced by 12 units in any direction.
📄️ Overlay Button
Use a Overlay Button for the most important action on a Window. The Overlay Button appears in front of all other content on Window, and is recognizable for its circle shape and icon in the center. Only use a Overlay Button for presenting a Window's primary action. The Overlay Button can be aligned left, center, or right.
📄️ Chips
Chips
📄️ Welcome Screen
The Welcome Screen is reserved for apps that need to present options and actions before displaying the main UI, such as Text Editors, Image Editors, etc.
📄️ Empty Page
Empty pages fill a view with an image or a symbolic icon, a title, and a description. They are used to fill a view that would be populated with content.
📄️ Banners
Banners are messages related to the view they're in, and they have up to two related action buttons.
📄️ Toasts
Toasts are Banners that are dismissable and transient to the View. They may contain an action button.
📄️ Dialog
Dialogs interrupt users with urgent information, details, or actions. Common usage includes confirming a destructive action, or informing the user of something instantly.
📄️ Badges
Badges are a small visual interaction with the user that aims to inform them of something, without using more than a colored dot.
📄️ Navigation Rail
- Use when there's at least 3 and at most 7 different views
📄️ View Chooser
Use a View Chooser when you need to filter a view and display that proeminently.
📄️ Avatar
Avatars are images that identify a person's picture throughout the user interface. It is used when identification of people is necessary, for example in chat apps.