Components

Interactive building blocks for creating user interfaces. Each component follows Material Design 3 guidelines.

Actions

Common buttons

Filled, tonal, elevated, outlined, text

FAB

Floating action button

Icon buttons

Standard, filled, tonal, outlined

Segmented buttons

Single or multi-select

Communication

Progress indicators

Linear and circular

Message sent

Snackbar

Brief messages at screen bottom

notifications 3

Badge

Notification indicators

Containment

Cards

Elevated, filled, outlined

Dialog

Content here

Dialogs

Modal messages and confirmations

Divider

Thin line separator

Bottom sheet

Surfaces anchored to bottom

Carousel

Horizontally scrolling content

Tooltip text

Tooltip

Informative text on hover

Navigation

menu Title

Top app bar

Center, small, medium, large

home

Home

search Search

Bottom app bar

Navigation bar for mobile

inboxInbox

sendSent

Navigation drawer

Modal and standard

Tab 1

Tab 2

Tabs

Primary and secondary

Cut

Copy

Paste

Menus

Dropdown action lists

search Search here

Bar and view

Selection

Chip

checkSelected

Chips

Assist, filter, input, suggestion

Checkbox

Multiple selection control

Radio button

Single selection control

Switch

Toggle on/off

Slider

Range selection control

Text input

Label

Text fields

Filled and outlined

Buttons

FAB

Cards

Elevated

Level 1 shadow

Filled

Highest surface

Outlined

Outline variant border

Selection

Checked Unchecked

Option A Option B

Sliders

Continuous

Discrete (steps of 10)

Text Fields

Full name

Dialog & Snackbar

Top App Bar

Small Top App Bar

Tabs

Search Bar

search mic

Progress Indicators

Linear

Circular (indeterminate)