Most wrong choices are between two components that look the same and mean different things. Each table below is one of those families. Find the row that sounds like your situation; the component in it is the answer, and its page opens with the same "Use it for / Not for" so you can check.
Something to press The situation Use Because The one action the screen is about Button filledOnce per view. Everything else steps down. The other actions beside it Button tonal / outlined / textThe emphasis ladder, in that order. The action is only an icon Icon Button Same tones, its own geometry, aria-label required. The screen's main action, floating, on a phone FAB One per screen. Sits above the content. One action plus a menu of alternatives Split Button The wide half acts, the narrow half opens the rest. A few related actions that read as one control Button Group Layout only; the buttons stay plain. A list of actions hanging off a trigger Menu Actions, not values. A small action inline with content — "add filter", "assist" Chip The assist chip. Navigation to another page Button href, or a plain linkA link is a link; variant="link" inside a sentence.
Something to choose The situation Use Because One of a few options, all visible, mutually exclusive Segmented Button Two to five options, short labels. One of a few options, in a form Radio The choice is submitted, not applied. One of many options Select A styled list of values. One of many, and you have to search for it Combobox Type to filter; load for the server. An on/off that takes effect immediately Switch A setting. Nothing to submit. A yes/no that is submitted with the form Checkbox Also "select this row". Several of many, above a list filter Chips The filter bar. A number in a range Slider Precision does not matter; the feel does. A colour, a phone number, a price, an emoji Color Picker , Phone Input , Price Input , Emoji Picker Each one stores the right value and shows the right keyboard.
Something to type The situation Use Because One line Text Field Label, supporting text, affixes, clear, password eye — built in. One line with a shape — a slug, a decimal, a card number Text Field with formatRejects what does not fit as it is typed. A few lines Textarea autosize for a composer.Formatted prose Rich Text Editor A contenteditable and a toolbar; nothing heavier. Code Code Editor A real textarea with a painted highlight layer, vim optional.
Something on top of the page The situation Use Because A decision the person must make before continuing Dialog Interrupts. await dialog.confirm(…) for the common case. A task that keeps the page in view — edit, filter, details Sheet A side panel on a laptop, a bottom sheet on a phone. A list of actions Menu Anchored, dismisses on choice. A word or two about a control, on hover Tooltip Never for anything the person must read. A picture, full screen Image Viewer Tap to lift it off the page. A first-run walkthrough Tour A spotlight, one thing at a time.
Telling the person something What happened Show Because Something succeeded or failed, briefly Toast Never blocks; toast.promise follows the request. Something about this page, that stays Alert A banner in the content, with a tone. Something is on its way Progress or Skeleton A bar when there is a known amount; a skeleton the shape of what is coming. There is nothing to show Empty With the one action that changes that. A count, or a status, on something Badge A pill on its own, or a dot on an icon. Something that needs a decision Dialog See above.
More on this in Feedback .
Something to hold content The situation Use Because A unit of content — one order, one metric Card Defaults to outlined; a grid of them usually wants elevated. Rows of one to three lines each List Swipe actions on a phone. Rows with columns, sorting, selection Table Server-side paging when it is big. Sections that expand one at a time Accordion Content in the page, not off it. Sections that swap Tabs Within a page — not app navigation. Panels the person can drag Resizable Remembers the layout. Media, side by side, swiped Carousel Five layouts. Photos of different heights Masonry The photo wall. Cards you drag between columns Kanban A board, not a table.
Getting around The situation Use Because Top-level destinations, on a laptop Navigation Drawer collapsed is the rail; responsive makes it modal on a phone.Top-level destinations, on a phone Navigation Bar Three to five, at the bottom. The title of this screen and its actions Top App Bar Pass sticky. Where you are, in a hierarchy Breadcrumb Collapses in the middle. Views within a page Tabs Primary on top, secondary nested. Pages of a long list Pagination Or the Table's own. Sections of a long page Table of Contents The rail on the right of this page. Searching the whole app Search Bar The bar and the view it opens into.
Showing data The situation Use Because A number over time Line or Area Chart Time goes on the x axis. Numbers by category Bar Chart Categories are bars. One number against its range Gauge The dial. A trend inside a stat Sparkline, from Charts No axes; the shape is the point. Places Map omaris/map, opt-in.Code, read-only Code Block Highlighted, copyable. A change between two versions Diff Viewer Unified or split. A JSON payload JSON Viewer Collapsible and searchable. A stream of log lines Log Viewer Levels, ANSI colour, follow. Any string on the screen Text The variant is the whole type decision.
Every component page opens with "Use it for" and "Not for", and every "Not for" line names the component to use instead. When a table above does not settle it, that section will.