Components

All 32 components, live. Everything below is interactive — click a title for install instructions and source.

Badge

The 6dp error dot and numbered count badge.

12999+
Banner

Inline contained banner with icon and text actions.

You're offline. Showing saved results.

Unusual sign-in detected on a new device.

Bottom App Bar

80dp action bar with a trailing FAB slot.

Content
Bottom Sheet

28dp-corner sheet with a drag handle on surface-container-low.

Button

Filled, tonal, outlined, text, and elevated common buttons.

Card

Elevated, filled, and outlined cards with 12dp corners.

Glass Souls world tour
From your recent favorites
Live in your city on October 12. Presale opens Friday at 10 AM.
Carousel

Multi-browse hero strip with rounded-xl snap items.

Alpine lakes
Desert light
Forest floor
City nights
Checkbox

18dp box with 2dp outline and primary fill.

Chip

Assist, filter, and input chips, 32dp with 8dp corners.

Date Picker

Docked calendar with today outline and filled selection.

July 2026
SMTWTFS
Dialog

Basic dialog: 28dp corners, headline, text-button actions.

Divider

1dp outline-variant rule, full-width or inset.

Full width

Inset

LeftRight
FAB

Floating action button in four colors and four sizes, extended included.

Icon Button

Standard, filled, tonal, and outlined icon buttons with toggle.

List

One- to three-line list items with leading and trailing slots.

  • StorageAuto-backupBack up new media over Wi-Fi
Menu

Elevation-2 menu on surface-container with 48dp items.

Navigation Bar

The 80dp bottom bar with pill active indicators.

home
Navigation Drawer

Standard and modal drawers with pill indicators.

Navigation Rail

The 80dp vertical rail with a FAB slot.

inbox
Progress

Linear indicator with stop dot, plus circular indeterminate.

Radio Group

20dp radio rings with a primary dot.

Search Bar

Full-round search bar expanding into a suggestion view.

Segmented Button

Outlined segments; selected fills with a check.

Side Sheet

400dp trailing-edge panel with title and close.

Slider

Tall active track, narrow handle, stop indicator.

Snackbar

Inverse-surface toast, bottom-left; call snackbar() anywhere.

    Switch

    52x32 track; the thumb grows and shows a check when on.

    Tabs

    Primary tabs with the animated pill underline indicator.

    Search hundreds of airlines.
    Text Field

    Filled and outlined fields with the floating label.

    We never share your address

    Already taken

    Time Picker

    Input-variant picker with 2-digit fields and AM/PM.

    Enter time

    :
    Tooltip

    Plain inverse-surface pill and rich container variants.

    Top App Bar

    64dp small app bar with on-scroll tint.

    Inbox

    Content