Skip to content
M3 Expressive Web
System Light Dark

Components

Live demos, code and the full API of each component.

Actions

  • Button

    Buttons start the actions people take most: save, send, continue. Five color configurations from high to low emphasis, five sizes, round or square, and toggles.

  • Icon button

    Compact buttons for actions with a clear icon, in four styles, five sizes and three widths, optionally toggling.

  • Button group

    A row of related buttons: in a standard group the pressed button grows and pushes its neighbors; a connected group selects one or several options.

  • Split button

    A button for the main action joined to a menu button for related actions.

  • FAB and extended FAB

    The floating action button holds the screen's most important action. Three sizes and six colors; the extended FAB adds a label and collapses on scroll.

  • FAB menu

    A FAB that opens two to six related actions, springing out above it.

  • Segmented button

    Deprecated (DECISIONS D4): a row of segments for single or multiple choice. Use a connected button group instead.

Communication

  • Loading indicator

    A short wait shown as Material shapes morphing into each other, contained or not, indeterminate or determinate.

  • Progress indicators

    Linear and circular progress indicators, determinate or indeterminate, flat or with the expressive wave.

  • mail New notification notifications 8 inbox 999+ shopping_bag New

    Badge

    A dot or a short count on an icon, telling people something new is there.

  • Message archived

    Snackbar

    A brief message at the bottom of the window about something the app did, with an optional action.

  • Add to favorites
    Permissions
    Configure permissions for service accounts.

    Tooltips

    Plain tooltips name a control; rich tooltips explain it, optionally with an action.

Containment

  • Elevated

    Content and actions about one subject.

    Filled

    Content and actions about one subject.

    Outlined

    Content and actions about one subject.

    Cards

    A surface for content and actions about one subject: elevated, filled or outlined, optionally interactive.

    • Ali Connors Product designer
    • Team lead Sandra Adams Engineering 12
    • All contacts

    Lists

    Rows of text and controls: one to three lines, leading and trailing content, selectable, and segmented items.

  • Carousel

    A scrolling row of items that grow and shrink as they move: multi-browse, uncontained, hero and full-screen layouts.

  • Discard draft?

    This permanently deletes the draft.

    Dialogs

    A modal window for an important prompt or a task that needs focus: alert dialogs and full-screen dialogs.

  • Sheet content

    Bottom sheets

    A surface anchored to the bottom of the window, standard or modal, that people drag between heights.

  • Side sheets

    A surface at the side of the window for supplementary content, standard beside the page or modal over it.

  • Above the line

    Below the line

    Left
    Right

    Divider

    A thin line that groups content in lists and layouts.

Navigation

  • Inbox

    Top app bars

    The bar at the top of a screen with its title and actions: small, center-aligned, medium and large flexible, and two-rows, with scroll behaviors.

  • Floating toolbar

    A toolbar that floats over the content, horizontal or vertical, with an optional FAB; it can hide on scroll.

  • Docked toolbar

    A toolbar docked to the bottom of the window for actions on the current page.

  • Search

    A search bar that expands into a full-screen or docked view of suggestions and results.

  • Navigation bar

    The bar at the bottom of compact windows to switch between three to five destinations.

  • Navigation rail

    Navigation at the side of medium and larger windows: a collapsed rail that expands, or opens as a modal.

  • Navigation drawer

    A sheet of destinations at the side of the window: permanent, dismissible or modal.

  • Navigation suite

    One set of destinations shown as a navigation bar, a rail or a drawer, chosen by the window size class.

  • Tabs

    Tabs switch between groups of content at the same level: primary or secondary, fixed or scrollable.

Selection

  • Chips

    Compact elements for input, filters, suggestions and actions: assist, filter, input and suggestion chips.

  • Menus

    A list of choices on a temporary surface: standard and vibrant colors, sections, and selectable items.

  • Checkbox

    Lets people select one or more items from a list, or turn an option on or off, with indeterminate and error states.

  • Radio button

    Lets people select one option from a set.

  • Switch

    Toggles a single setting on or off, optionally with icons in its handle.

  • Slider

    Lets people pick a value or a range from a track: five sizes, stops, centered and vertical sliders and an inset icon.

  • Date pickers

    Lets people select a date or a range of dates from a calendar, a year grid or a text field.

  • Time pickers

    Lets people select a time on a clock dial, in text fields or on scroll wheels.

Text input

  • Work address

    Text fields

    Lets people enter text: filled and outlined, with labels, icons, prefixes and suffixes, counters and multiple lines.

Layout

  • Feed
    Layout
    Panes

    Canonical layouts

    Ready-made adaptive layouts: list-detail, supporting pane and feed, with the window size classes that drive them.

  • Pull to refresh

    Pull down at the top of a list to refresh it, with the expressive loading indicator.

Primitives

  • Surface

    Primitives

    The building blocks every component uses: surfaces, icons, the state layer and the focus ring.