Skip to content
m3exp-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.