Badges are generally used to emphasize some elements and they are placed in element corners.
Buttons allow users to take actions, and make choices, with a single tap.
Cards are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.
Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.
Chips are compact elements that represent an input, attribute, or action.
A container is the main content of page.
Dialogs inform users about a task and can contain critical information, required decisions, involve multiple tasks, provide access to destinations in your app and contain a small forms to submit.
Expansion contain creation flows and allow lightweight editing of an element.
Grids are rows and cols system grid. They are most used to organize content.
Material design system icons are simple, modern, friendly, and sometimes quirky. Each icon is created using our design guidelines to depict in simple and minimal forms the universal concepts used commonly throughout a UI. Ensuring readability and clarity at both large and small sizes, these icons have been optimized for beautiful display on all common platforms and display resolutions.
Input fields let users enter and edit text.
Layouts are containers that you can place in any position. There are absolute and fixed elements.
Media can be a image or video element.
Menus display a list of choices on temporary surfaces.
Navigations are containers that display actions placed horizontally or vertically. Elements, like buttons, chips, images, checkboxes, radios and switches can be placed inside a nav. Some examples are navigation rail or navigation bar.
Overlays block user screen and can express an unspecified wait time.
Pages are containers that can be a main page, multiple pages or just to animate an element.
Progress display the length of a process or an unspecified wait time.
Radio buttons allow users to select one option from a set.
Selects display a list of choices on temporary surfaces.
Switches toggle the state of a single item on or off.
Tables display sets of data across rows and columns.
Tabs organize content across different screens, data sets, and other interactions.
Textarea fields let users enter and edit long text.
Snackbars provide brief messages about app processes at bottom or top of the screen. It's not recomended to show two or more snackbars at same time.
Tooltips displays informative text when users hover over, focus on, or tap an element.
Use typography to present your design and content as clearly and efficiently as possible.
Begin, Elements, Helpers, Settings, Summary, beercss.com
Badge, Button, Card, Checkbox, Chip, Container, Dialog, Expansion, Grid, Icon, Input, Layout, Main layout, Media, Menu, Navigation, Overlay, Page, Progress, Radio, Select, Slider, Switch, Table, Tabs, Textarea, Snackbar, Tooltip, Typography