Components

widgets

Components
format_paint

Colors
format_size

Typography
invert_colors

Elevation

Actions

Buttons

Floating Action buttons (Fabs)

Icon buttons

Segmented Buttons (Checkbox & Radio)

Communication

Progress Indicators

Snackbar

Single-line snackbar

Containment

Cards

Outlined

Elevated

Filled

Divider


Center
format_align_left format_align_center format_align_right
format_bold format_italic

Lists

media 2

List Item

Supporting line text
100+
media 2

List Item

Supporting line text
100+
avatar

List Item

A

List Item

Bottom Sheets

insert content bottom sheets

Side Sheets

Title Side Sheet

Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.

Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.

Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.

Dialogs

Dialogs Fullscreen

Navigation

Bottom App Bar

Navigation Bar

mail
999+

Mail
chat_bubble
1

Chat
groups

Rooms
star

For You

Navigation Drawer

Mail

Labels

Navigation Rail

inbox
12

Inbox
chat_bubble
1

Chat
groups

Rooms
star

For You

Search

A
A

List Item

Supporting line text
A

List Item

Supporting line text
A

List Item

Supporting line text

Top App Bar

LOGO

Product

Product

Headline

Tabs

Selection

Checkbox

Radio

Chips

Enabled
Enabled close
Avatar
Avatar
face
With Icon
face
With Icon close
Enabled
Enabled close
Avatar
Avatar
face
With Icon
face
With Icon close

Switch

Range Sliders

Menus

Datalist

Edit

Text Inputs

Input filled

Supporting text
search

Input outlined

Supporting text
search