Components

Triggers an action, like submit or save

Joins related buttons into one attached cluster

Turns a formatting mark or view option on or off

Groups toggles into one single- or multi-select control

Groups related controls into one keyboard-navigable strip

Picks a status or priority, shown as a badge

Picks a date from a month grid

Marks a yes/no choice, alone or in a set

Searches and selects a single option

Types or picks a date from a calendar

Picks a date and time together

Pairs a control with its label and help text

Accepts files by drag-and-drop or browse

Builds queries from field, operator, and value

Wires controls, labels, and validation together

Edits a value in place

Accepts a single line of text

Accepts a short, fixed-length code

Names a form control

Selects several values into one searchable field

Enters a formatted number with steppers

Selects one option from a visible set

Collects or shows a star rating

Picks one option from a dropdown

Sets a number or range on a track

Turns a setting on or off, applied instantly

Accepts multiple lines of text

Types a time of day, with arrow-key stepping

Picks a time from selectable slots

Shows the path to the current page

Lines up pull-down menus, like File and Edit

Navigates the site with dropdown panels

Moves through pages of results

Guides through steps in a process

Switches between views in place

Confirms or cancels a critical action

Finds and runs actions from a ⌘K palette

Opens actions on right-click

Opens a modal for a focused task

Slides up from the bottom, swipe to dismiss

Opens a menu of actions from a button

Previews details on hover

Floats detail or a small form beside a control

Slides in a panel from a screen edge

Explains a control on hover or focus

Expands and collapses stacked sections

Expands and collapses a single section

Calls out an important message inline on the page

Fills the space when there's nothing to show

Shows how far a task has advanced

Stands in for content while it loads

Pops up brief messages that stack and auto-dismiss

Signals an indeterminate wait

Maps activity over time as shaded cells

Represents a person or entity with an image

Labels a status, count, or category

Ranks values as labeled horizontal bars

Moves cards between columns, Kanban-style

Compares a value against its target

Cycles through slides one at a time

Plots data as line, bar, area, or pie

Shows one dataset as a table, board, or custom view

Shows a notification or unread count

Puts search, filters, and view options above a collection

Lists field-and-value details for one record

Arranges images in a browsable grid

Plots tasks as bars across a timeline

Shows a single value on a radial dial

Shades a grid of values by intensity

Shows a keyboard key or shortcut

Stacks related items in rows

Makes any collection reorderable by drag or keyboard

Shows a trend as a tiny inline chart

Highlights a key metric and its change

Displays data in sortable rows and columns

Filters or picks values as removable chips

Lists past events in chronological order

Shows status history as colored blocks

Browses nested items, like files and folders

Frames the page with sidebar, content, and aside

Locks content to a width-to-height ratio

Groups related content and actions

Resizes panels by dragging a divider

Schedules events across day, week, and month

Adds a styled scrollbar to an overflowing region

Divides content into groups