Components

Triggers, commands, and toggles.

• ButtonTriggers an action with primary, secondary, or destructive emphasis.
• Button groupJoins related buttons, or a button and its menu, into one row or column.
• MenuOpens a list of actions from a trigger.
• Context menuOpens actions for an item on right-click, long press, or keyboard.
• Toggle buttonSwitches a button between selected and unselected states.
• Toggle button groupGroups toggle buttons for one or more choices.
• ToolbarGroups related controls in one tab stop, with arrow keys to move focus.
• File triggerOpens the file picker from a button or other trigger.
• Copy buttonCopies a value to the clipboard and shows the result.
• Command paletteOpens a search dialog to find and run commands.

Fields, choices, files, and validation.

• Text fieldAccepts one line of text, with a label and validation.
• Password fieldAccepts a password, with a button to show or hide it.
• Password strength meterRates a password by its length and character mix.
• Inline editEdits text in place and keeps the draft when the save fails.
• Input groupJoins an input with a prefix, suffix, or action.
• Text areaAccepts multiple lines of text.
• Number fieldAccepts a number, with buttons to increase and decrease it.
• Search fieldAccepts a search query, with a button to clear it.
• SelectSelects one option from a list in a popover.
• Native selectSelects one option with the native HTML select element.
• Combo boxSelects one or more options from a list that filters as you type.
• AutocompleteFilters a menu or list from a search field as you type.
• Token fieldTurns typed entries into tokens that you can edit and remove.
• CheckboxSelects or clears one independent option.
• Checkbox groupGroups checkboxes to select one or more options.
• Radio groupSelects one option from a short visible list.
• Rating inputSets a star rating with radio controls.
• SwitchTurns a setting on or off immediately.
• SliderSelects a value or range on a track between a minimum and maximum.
• Drop zoneAccepts files that you drag and drop onto it.
• AttachmentShows the name, size, preview, and upload state of a file.
• FormGroups fields and handles validation and submission.
• FieldsetGroups related native form controls under a legend.

Structured dates, times, and colors.

• Date fieldAccepts a date, with one editable segment for each part.
• Time fieldAccepts a time, with one editable segment for each part.
• CalendarShows a month grid to select one date.
• Range calendarShows a month grid to select a start and end date.
• Date pickerAccepts a date that you type or select from a calendar popover.
• Date range pickerAccepts a date range that you type or select from a calendar popover.
• Color fieldAccepts a hex color, or one color channel as a number.
• Color swatchShows a sample of a color.
• Color swatch pickerSelects a color from a set of swatches.
• Color pickerSelects a color with a color area, hue slider, and hex field in a popover.

Panels and messages above the page.

• DialogShows a focused task in a modal above the page.
• SheetShows a swipeable panel that slides in from the edge of the screen.
• PopoverShows content in a panel anchored to its trigger.
• TooltipShows a short hint when you hover over or focus its trigger.
• ToastShows a brief notification after an action.

Links between pages and views.

• LinkShows a link to another page or location.
• TabsShows one panel of related content at a time.
• BreadcrumbsShows the path of links to the current page.
• PaginationShows links between pages of results.

Lists, trees, and tables of items.

• List boxSelects options from a list that stays visible.
• Grid listShows a list of interactive rows that you can select and act on.
• TreeShows nested items that you can expand, collapse, and select.
• Tag groupShows a group of tags that you can select or remove.
• TableShows data in rows and columns, with sortable headers.
• Data tableShows rows with search, filters, sorting, selection, and pagination.

Status, progress, and loading states.

• AlertShows an inline message about a status or event.
• BadgeShows a short label, status, or count.
• Progress barShows the progress of a task in a horizontal bar.
• Progress ringShows the progress of a task in a circular indicator.
• MeterShows a measured value within a known range.
• StepperShows the current and completed steps in a sequence.
• SpinnerShows a loading indicator for a task with no known end time.
• SkeletonShows a placeholder shape while content loads.
• Empty stateShows why a view is empty and what to do next.

Containers, sections, and values.

• CardGroups related content and actions in one container.
• AccordionShows a set of sections that expand and collapse.
• DisclosureShows or hides one section of content.
• SeparatorShows a line between sections of content.
• AvatarShows an image or initials for a person.
• Description listShows pairs of terms and details.
• StatShows a labeled metric with supporting details.
• TimelineShows events in a time-ordered sequence.
• Kbd & codeShows keyboard keys and inline code in text.

Prompts, answers, agent steps, and sources.

• MessageShows a message in a conversation.
• Agent statusShows the current step of an agent and its state.
• Tool callShows a tool call and its status, and expands to show the input and output.
• Source linkLinks an answer to its source.
• Prompt inputAccepts a prompt to send, with files and actions.
• ReasoningReveals the thinking of an agent and how long it took.
• ResponseShows a streaming answer with its status and actions.

Text and content transitions.

• Text swapAnimates text when its value changes.
• Animated numberAnimates a number when its value changes.
• Text revealReveals text one word or one character at a time.
• Text scrambleResolves text from scrambled characters when its value changes.
• PresenceAnimates content when it is shown or hidden.
• Presence listAnimates list items when you add, remove, or move them.
• Stagger groupAnimates a group of items into view one after another.
• Layout morphAnimates the height of a container when its content changes.
• MarqueeLoops a strip of content, with a control to pause it.