Skip to main content brightness_auto motion_photos_off palette download more_vert
toc

Material Web 3.0

Components

The md-gb elements: interactive building blocks for your interface, each with live examples, guidelines and its API.

36 pages · View as Markdown

Buttons

  • Button Group

    Group related buttons and let them react to one another

  • Buttons

    Start most actions in a UI with a tap

  • FAB menu

    Reveal several related actions from a floating button

  • Floating action button (FAB)

    Put the primary action of a screen within reach

  • Icon Buttons

    Take a quick action with a single, compact icon

  • Segmented buttonNot recommended

    Switch between options in a connected row

  • Split button

    Offer a main action with a menu of alternatives

Date & time pickers

  • Date picker

    Pick a date from a calendar or by typing it

  • Time picker

    Choose a time of day with a dial or inputs

Loading & progress

Navigation

  • Navigation Bar

    Switch between top-level views on small screens

  • Navigation Drawer

    Switch between destinations on large screens

  • Navigation Rail

    Switch between destinations on mid-sized screens

Sheets

  • Sheets

    Show supporting content in a surface that slides in

All other components

  • App Bar

    Anchor a screen with its title, navigation and actions

  • Badge

    Flag a count or status on an icon or destination

  • Card

    Gather content and actions about a single subject

  • Scroll through a collection of items, large to small

  • Checkbox

    Select one or more items, or turn an option on or off

  • Chips

    Enter information, filter content or trigger actions

  • Dialogs

    Interrupt the flow with an important prompt

  • Divider

    Draw a thin line between groups of content

  • Lists

    Present text and images in a continuous vertical index

  • Menus

    Offer a list of choices on a temporary surface

  • Radio

    Choose exactly one option from a set

  • Find content by entering a keyword or phrase

  • Select

    Choose one option from a list that opens on demand

  • Sliders

    Pick a value from a range by dragging

  • Snackbar

    Confirm an action with a brief message

  • Switch

    Turn a single setting on or off

  • Tabs

    Organize related content at the same level

  • Text field

    Let people type and edit text

  • Toolbar

    Collect actions that belong to the current page

  • Tooltip

    Explain an element in a short, temporary label

Install Material Web 3.0

Your browser did not offer to install the docs as an app. Install them from the browser instead:

Close Send feedback
Bug Documentation Idea

Opens a new GitHub issue for material-components/material-web in a new tab, with this filled in.

Cancel Open issue