---
title: WordPress Design System Components
canonical: https://system.automattic.design/components/
---

# WordPress Design System Components

Reference for components in the WordPress Design System.

Every component has a markdown detail page at `/components/{slug}.md`.

The archive at https://system.automattic.design/components.md lists them all.

Both URLs also respond to `Accept: text/markdown` if your client prefers content negotiation.

Agents that support MCP should prefer `@wordpress/design-system-mcp` over scraping these pages.

## Actions

- [Button](https://system.automattic.design/components/button.md) — Lets users take actions and make choices with a single click or tap.
- [Link](https://system.automattic.design/components/link.md) — A styled anchor element with support for semantic color tones and an
unstyled escape hatch.
- [MenuGroup](https://system.automattic.design/components/menugroup.md) — MenuGroup wraps a series of related MenuItem components into a common
section.
- [MenuItem](https://system.automattic.design/components/menuitem.md) — MenuItem is a component which renders a button intended to be used in combination with the DropdownMenu component.
- [MenuItemsChoice](https://system.automattic.design/components/menuitemschoice.md) — MenuItemsChoice functions similarly to a set of MenuItems, but allows the user to select one option from a set of multiple choices.

## Calendar

- [Calendar](https://system.automattic.design/components/calendar.md) — Calendar provides a customizable calendar interface for single date
selection.
- [RangeCalendar](https://system.automattic.design/components/rangecalendar.md) — RangeCalendar provides a customizable calendar interface for date range
selection.

## Containers

- [Card](https://system.automattic.design/components/card.md) — A visually contained surface that groups related content and actions.
- [Collapsible](https://system.automattic.design/components/collapsible.md) — Groups all parts of the collapsible.
- [CollapsibleCard](https://system.automattic.design/components/collapsiblecard.md) — A card that can be expanded and collapsed. When collapsed, only the
header is visible.
- [ItemGroup](https://system.automattic.design/components/itemgroup.md) — ItemGroup displays a list of Items grouped and styled together.
- [Stack](https://system.automattic.design/components/stack.md) — A flexible layout component using CSS Flexbox for consistent spacing and alignment.
Built on design tokens for predictable spacing values.
- [Tabs](https://system.automattic.design/components/tabs.md) — Groups the tabs and the corresponding panels.

## DataViews

- [DataForm](https://system.automattic.design/components/dataform.md) — DataForm renders an auto-generated form for viewing and editing the fields
of a data item, driven by a fields and form layout configuration. Use it to
edit items of a dataset, often alongside DataViews.
- [DataViews](https://system.automattic.design/components/dataviews.md) — DataViews renders a dataset using configurable layouts (table, grid, list)
with built-in search, filtering, sorting, pagination, and actions. Use it to
display and manage a collection of records.
- [DataViewsPicker](https://system.automattic.design/components/dataviewspicker.md) — DataViewsPicker renders a dataset allowing users to select one or multiple
items. It shares the layouts, search, and filtering of DataViews but is
geared toward choosing items rather than managing them.

## Feedback

- [Badge](https://system.automattic.design/components/badge.md) — A badge component for displaying labels with semantic intent.
- [EmptyState](https://system.automattic.design/components/emptystate.md) — The root container for an empty state component.
- [Notice](https://system.automattic.design/components/notice.md) — Notice is a component used to communicate feedback to the user.
- [ProgressBar](https://system.automattic.design/components/progressbar.md) — A simple horizontal progress bar component.
- [Skeleton](https://system.automattic.design/components/skeleton.md) — A placeholder shown while content is loading.
- [Snackbar](https://system.automattic.design/components/snackbar.md) — A Snackbar displays a succinct message that is cleared out after a small delay.
- [Spinner](https://system.automattic.design/components/spinner.md) — A component used to notify users that their action is being processed.

## Forms

- [Autocomplete](https://system.automattic.design/components/autocomplete.md) — Low-level primitive for an autocomplete input that suggests options as
you type. Unlike Combobox, the input can contain free-form text and
suggestions only optionally autocomplete the text.
- [BaseControl](https://system.automattic.design/components/basecontrol.md) — BaseControl is a low-level component used to generate labels and help text for components handling user inputs.
- [CheckboxControl](https://system.automattic.design/components/checkboxcontrol.md) — Checkboxes allow the user to select one or more items from a set.
- [ColorIndicator](https://system.automattic.design/components/colorindicator.md) — ColorIndicator is a React component that renders a specific color in a
circle. It's often used to summarize a collection of used colors in a child
component.
- [ColorPalette](https://system.automattic.design/components/colorpalette.md) — Allows the user to pick a color from a list of pre-defined color entries.
- [ColorPicker](https://system.automattic.design/components/colorpicker.md) — ColorPicker lets users select a color from a visual color surface, or by
editing its hex, RGB, or HSL values.
- [ComboboxControl](https://system.automattic.design/components/comboboxcontrol.md) — ComboboxControl is an enhanced version of a SelectControl with the addition of
being able to search for options using a search input.
- [CustomSelectControl](https://system.automattic.design/components/customselectcontrol.md) — CustomSelectControl is a dropdown for selecting a single option from a
list, with support for custom styling. Use it instead of the SelectControl
when options need richer markup (e.g. per-option styles or hints).
- [DropZone](https://system.automattic.design/components/dropzone.md) — DropZone is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.
- [Field](https://system.automattic.design/components/field.md) — A low-level component that associates an accessible label and description
with a single form control element.
- [Fieldset](https://system.automattic.design/components/fieldset.md) — A low-level component that associates an accessible legend and description with
a group of multiple form control elements.
- [FormFileUpload](https://system.automattic.design/components/formfileupload.md) — FormFileUpload allows users to select files from their local device.
- [FormToggle](https://system.automattic.design/components/formtoggle.md) — FormToggle switches a single setting on or off.
- [FormTokenField](https://system.automattic.design/components/formtokenfield.md) — A FormTokenField is a field similar to the tags and categories fields in the interim editor chrome,
or the "to" field in Mail on OS X. Tokens can be entered by typing them or selecting them from a list of suggested tokens.
- [GradientPicker](https://system.automattic.design/components/gradientpicker.md) — GradientPicker is a React component that renders a color gradient picker to
define a multi step gradient. There's either a linear or a radial type
available.
- [Input](https://system.automattic.design/components/input.md) — A low-level primitive for an input field.
- [InputControl](https://system.automattic.design/components/inputcontrol.md) — A complete input field with integrated label and description.
- [InputLayout](https://system.automattic.design/components/inputlayout.md) — A low-level component that handles the visual layout of an input-like field,
including disabled states and standard prefix/suffix slots.
- [RadioControl](https://system.automattic.design/components/radiocontrol.md) — Render a user interface to select the user type using radio inputs.
- [RangeControl](https://system.automattic.design/components/rangecontrol.md) — RangeControls are used to make selections from a range of incremental values.
- [SearchableChipSelect](https://system.automattic.design/components/searchablechipselect.md) — A low-level primitive for a searchable multi-selection field with chips, with
support for a creatable footer action.
- [SearchableChipSelectControl](https://system.automattic.design/components/searchablechipselectcontrol.md) — A complete searchable multi-select field with chips, integrated label,
and description.
- [SearchControl](https://system.automattic.design/components/searchcontrol.md) — SearchControl components let users display a search control.
- [Select](https://system.automattic.design/components/select.md) — A component that lets users choose one option from a list.
- [SelectControl](https://system.automattic.design/components/selectcontrol-2.md) — A complete select field with integrated label and description.
- [Textarea](https://system.automattic.design/components/textarea.md) — A low-level primitive for a textarea field.
- [TextareaControl](https://system.automattic.design/components/textareacontrol.md) — A complete textarea field with integrated label and description.
- [ToggleControl](https://system.automattic.design/components/togglecontrol.md) — ToggleControl is used to generate a toggle user interface.
- [ToggleGroupControl](https://system.automattic.design/components/togglegroupcontrol.md) — ToggleGroupControl is a form component that lets users choose options
represented in horizontal segments. To render options for this control use
ToggleGroupControlOption component.
- [TreeSelect](https://system.automattic.design/components/treeselect.md) — Generates a hierarchical select input.
- [UnitControl](https://system.automattic.design/components/unitcontrol.md) — UnitControl allows the user to set a numeric quantity as well as a unit (e.g. px).
- [ValidityIndicator](https://system.automattic.design/components/validityindicator.md) — Displays a validity message for a form control, with an icon matching the
validity state: invalid, valid, or validating (a spinner while an async
check is pending).

## Navigation

- [Navigator](https://system.automattic.design/components/navigator.md) — The Navigator component allows rendering nested views/panels/menus
(via the Navigator.Screen component) and navigate between them
(via the Navigator.Button and Navigator.BackButton components).
- [TreeGrid](https://system.automattic.design/components/treegrid.md) — TreeGrid is used to create a tree hierarchy.
It is not a visually styled component, but instead helps with adding
keyboard navigation and roving tab index behaviors to tree grid structures.

## Overlays

- [ConfirmDialog](https://system.automattic.design/components/confirmdialog.md) — ConfirmDialog is built on top of Modal
and displays a confirmation dialog, with confirm and cancel buttons.
- [Dropdown](https://system.automattic.design/components/dropdown.md) — Renders a button that opens a floating content modal when clicked.
- [Modal](https://system.automattic.design/components/modal.md) — Modals give users information and choices related to a task they’re trying to
accomplish. They can contain critical information, require decisions, or
involve multiple tasks.
- [Popover](https://system.automattic.design/components/popover.md) — Popover renders its content in a floating modal. If no explicit anchor is passed via props, it anchors to its parent element by default.
- [Tooltip](https://system.automattic.design/components/tooltip.md) — Tooltip is used to visually show the label of an icon button, or other such
interactive controls that don't have a visual text label.

## Typography

- [Icon](https://system.automattic.design/components/icon.md) — Renders an SVG icon with a 24px default size.
- [Text](https://system.automattic.design/components/text.md) — A text component for rendering content with predefined typographic variants.
Built on design tokens for consistent typography across the UI.
- [TextHighlight](https://system.automattic.design/components/texthighlight.md) — Highlights occurrences of a given string within another string of text. Wraps
each match with a <mark> tag which provides browser default styling.
- [Truncate](https://system.automattic.design/components/truncate.md) — Truncate is a typography primitive that trims text content.
For almost all cases, it is recommended that Text, Heading, or
Subheading is used to render text content. However,Truncate is
available for custom implementations.

## Utilities

- [Composite](https://system.automattic.design/components/composite.md) — Renders a widget based on the WAI-ARIA composite
role, which provides a single tab stop on the page and arrow key navigation
through the focusable descendants.
- [Disabled](https://system.automattic.design/components/disabled.md) — Disabled is a component which disables descendant tabbable elements and
prevents pointer interaction.
- [KeyboardShortcuts](https://system.automattic.design/components/keyboardshortcuts.md) — KeyboardShortcuts is a component which handles keyboard sequences during the lifetime of the rendering element.
- [ResizableBox](https://system.automattic.design/components/resizablebox.md) — ResizableBox wraps content in a container with draggable handles, letting
users interactively resize it along one or more edges or corners.
- [SandBox](https://system.automattic.design/components/sandbox.md) — This component provides an isolated environment for arbitrary HTML via iframes.
- [ScrollLock](https://system.automattic.design/components/scrolllock.md) — ScrollLock is a content-free React component for declaratively preventing
scroll bleed from modal UI to the page body. This component applies a
lockscroll class to the document.documentElement and
document.scrollingElement elements to stop the body from scrolling. When it
is present, the lock is applied.
- [Shortcut](https://system.automattic.design/components/shortcut.md) — Shortcut component is used to display keyboard shortcuts, and it can be customized with a custom display and aria label if needed.
- [Slot](https://system.automattic.design/components/slot.md) — Slot marks a location where content rendered by matching Fill components
elsewhere will appear. Use it to allow a component to define UI areas that
can be extended from other parts of the application.
- [VisuallyHidden](https://system.automattic.design/components/visuallyhidden.md) — Visually hides content while keeping it accessible to screen readers.
Useful when providing context that's only meaningful to assistive technology.