# All components

> The complete list: 44 semantic components with what each of 13 design systems calls them, plus the foundations, patterns and renderer behaviours that are not components.

Source: https://polyxd.com/docs/reference/coverage/

Every component the 13 supported design systems document, read from their official documentation in September 2026, and what Polyxd calls it. Polyxd keeps one component per meaning, and each system's variety becomes a variant of it, so a generator picks from 44 choices instead of 1,079. Every component renders in every design system, including the ones that don't have it.

All 44 exist (the [components reference](https://polyxd.com/docs/reference/components/) has their props). **11 of them, and variants on the rest, were added in spec v0.2** because this survey found them in the design systems and not in Polyxd. **Spec v0.3 added 7 more**: the product's shell (a frame, an app bar, a footer, an outlet and a slot for the host's own components) and side-by-side layout, which the survey had filed as app chrome and layout. Shell components are authored-only: a generator never writes them. The survey itself, with the inventories and the mapping, is `research/components/` in the repository.

## Components

The bar on each card is how many of the 13 systems have their own version. Dashed tags are variants added in v0.2 and v0.3.

### Actions

- `Action`13 of 13A button that triggers a host capability.Covers *Buttons, Extended FABs, Floating action buttons (FABs), Icon buttons, Button, Link, FloatButton, CompoundButton, Icon link, ActionIcon, Anchor, CopyButton, Icon Button, IconButton* and 6 moreui.copydescription

- `ActionBar`************7 of 13The set of actions for a surface or section; the renderer places it where that platform expects.Covers *Button groups, Toolbars, Toolbar, MenuList, Button Group, Page actions, ActionBar, ButtonGroup, ActionButtonGroup, ActionGroup*

- `ActionMenu`New in v0.2**12 of 13Secondary actions behind one control: an overflow menu, dropdown, split button or context menu.Covers *FAB menu, Split buttons, Menus, Menu, Menu buttons, Overflow menu, Combo button, Dropdown, MenuButton, SplitButton, MenuGrid, Context Menu, Dropdown Menu, Menubar* and 7 moredropdownsplitoverflowcontextmenubarfloating

- `Confirm`****************5 of 13Asks the user to confirm a consequential or destructive action, showing what will happen.Covers *Popconfirm, Alert Dialog, ConfirmationDialog, AlertDialog*

### Inputs

- `TextInput`13 of 13A single text-like value: text, number, email, phone, currency, search or long text.Covers *Search, Text fields, Number input, Text input, Text area, AutoComplete, Input, InputNumber, Mentions, Searchbox, Spin button, Textarea, Input Group, Form control* and 30 moresuggestionstagsrichtextmentionscodemaskedinline-edit

- `Choice`13 of 13Pick one or several options from a known set. The renderer chooses the control.Covers *Segmented buttons, Checkbox, Chips, Radio button, Dropdown, Multiselect, Select, Combo box, Radio, Transfer, Segmented, Combobox, Radio group, Tag picker* and 30 more

- `Toggle`**12 of 13An on/off setting.Covers *Switch, Toggle, ToggleButton, Switches, Setting toggle, ToggleSwitch*

- `DateInput`****11 of 13A date, time, date-time or date range.Covers *Date pickers, Time pickers, Date picker, Time picker, DatePicker, TimePicker, Calendar (compat), DatePicker (compat), TimePicker (compat), Calendar, DateInput, DatePickerInput, DateTimePicker, InlineDateTimePicker* and 13 moremonthyear

- `RangeInput`****11 of 13A number, or a range between two numbers, within known bounds.Covers *Sliders, Slider, Range, AngleSlider, RangeSlider, Range slider*

- `Form`**************6 of 13Collects inputs and submits them together.Covers *Form, Contextual save bar, Save bar, ControlGroup, Addresses, Equality information, Check a service is suitable, Question pages*

- `FileInput`New in v0.2**********8 of 13Choose or drop files to upload.Covers *File uploader, Upload, File input, FileButton, FileInput, Dropzone, Drop zone, FileTrigger, File upload*dropzone

- `ColorInput`New in v0.2************7 of 13Pick a colour or a swatch.Covers *ColorPicker, SwatchPicker, Color input, AlphaSlider, ColorInput, HueSlider, Color picker, Color field, ColorArea, ColorField, ColorSlider, ColorSwatchPicker, ColorWheel, Color loupe*swatchchannel

- `CodeInput`New in v0.2******************4 of 13A one-time code or PIN, typed into boxes.Covers *Input OTP, PinInput, Confirm a phone number, Confirm an email address, Pin Input*

- `Rating`New in v0.2****************5 of 13Give or show a score out of N.Covers *Rate, Rating, RatingDisplay*inputdisplay

### Content

- `Text`****11 of 13A run of text.Covers *List, Typography, Text, Blockquote, ColorSwatch, Highlight, Mark, NumberFormatter, TimeValue, Em, Quote, Strong, Caption, Text style* and 11 morerichlistquoteformat:colorformat:bytes

- `Metric`******************4 of 13A key figure with a label, and optionally its change.Covers *Statistic, RollingNumber, Big number, Stat*

- `DetailList`************7 of 13Label/value pairs describing one thing (a summary, a receipt, a review step).Covers *Descriptions, DataList, Data List, Description list, LabeledValue, Summary list, Check answers, Contact a department or service team*rowAction

- `Table`**12 of 13Tabular data: many items sharing the same attributes.Covers *Data table, Pagination, Structured list, Table, DataGrid, Tables, ActionBar, Bulk actions, Index filters, Index table, Select all actions, DataTable, TableView, Action Bar*

- `Collection`****11 of 13A list of items from host data, each rendered with the same template.Covers *Carousel, Lists, Contained list, Calendar, List, Timeline, CarouselNav, List group, Schedule, Resource list, DragAndDrop, ListView, SimpleListView, CardView*carouselcalendarreorderable

- `Chart`******************4 of 13A visual summary of data, always paired with a text summary.Covers *Chart, AreaChart, BarChart, BarsList, BubbleChart, CandlestickChart, CompositeChart, DonutChart, FunnelChart, Heatmap, LineChart, MatrixChart, PieChart, RadarChart* and 14 morerelationshiprangeflowmatrixhierarchy

- `Media`************7 of 13An image, video, audio clip, gallery or QR code supplied by the host.Covers *Image, QRCode, Images, Figures, BackgroundImage, Thumbnail, Video thumbnail, QR Code*qrvideo

- `Status`**12 of 13Feedback about state: info, success, warning, error, empty or loading.Covers *Notification, Empty, Alert, Result, Message bar, Alerts, EmptyState, Callout, Banner, Empty state, Exception list, Blankslate, InlineMessage, IllustratedMessage* and 11 more

- `Tag`New in v0.213 of 13A short label, status or count attached to something else.Covers *Badges, Tag, Badge, CounterBadge, InteractionTag, TagGroup, Indicator, Pill, Clickable chip, Chip, CounterLabel, Label, LabelGroup, StateLabel* and 4 morelabelcountstatusremovableinteractive

- `Identity`New in v0.2********9 of 13A person, team or organisation: picture, name and details.Covers *Avatar, Avatar group, Persona, PresenceBadge, AvatarStack, CircleBadge, GitHubAvatar, AvatarGroup*avatargrouppersonapresence

- `Tree`New in v0.2************7 of 13A hierarchy people expand, browse and pick from.Covers *Tree view, Cascader, TreeSelect, Tree, TreeView, NestedListView*select

- `Progress`New in v0.2**12 of 13How far along something is, or an amount within bounds: bars, rings, meters, gauges.Covers *Progress indicators, Progress bar, Progress, RingProgress, SemiCircleProgress, BulletChart, GaugeChart, ProgressBar, Meter, ProgressCircle, Progress Circle*meter

- `Code`New in v0.2**************6 of 13Code or preformatted text, copyable.Covers *Code snippet, Code, CodeHighlight, BranchName, Code Block*inlineblock

### Structure and flow

- `Section`************7 of 13A titled region of the surface that groups related content under a heading.Covers *Fieldset, Title, Heading, Card, Legacy card, Page, Display text, Subheading, Section, PageHeader, Start using a service*

- `Group`**************************0 of 13Visually groups closely related items without a heading (proximity).

- `Card`**12 of 13One self-contained entity (an account, an order, a place), optionally actionable as a whole.Covers *Cards, Tile, Card, Attachment, Item, Stretched link, Account connection, Callout card, Media card, Resource item, Link Overlay*

- `Columns`New in v0.3********9 of 13Side-by-side columns that collapse to a stack on compact layouts: a main column with a narrower one beside it, or equal halves.Covers *2x Grid, Grid, CSS Grid, SimpleGrid, Inline grid, Layout, PageLayout*halvestwo-thirdssidebar-end

- `Split`New in v0.3****************5 of 13Master and detail side by side: a list that stays while the chosen item's detail shows beside it; on compact layouts the detail replaces the list.Covers *Splitter, Resizable, SplitPageLayout*resizable

- `Disclosure`****11 of 13Progressive disclosure: secondary content hidden behind a toggle.Covers *Accordion, Collapse, Collapsible, Spoiler, Details, Disclosure*

- `Views`13 of 13Switch between alternative views of the same subject (tabs).Covers *Tabs, Content switcher, Tablist, Navs & tabs, Legacy tabs, SegmentedControl, UnderlinePanels, MarkdownEditorViewSwitch*

- `Steps`************7 of 13A task split into ordered steps with visible progress.Covers *Progress indicator, Steps, Questionnaire, Stepper, StepList, Task list, Complete multiple tasks, Step by step navigation*tasklistguide

- `Comparison`**************************0 of 13Compare a few options across the same attributes, and choose one.

- `FilterPanel`**********************2 of 13Filters for a list of results, with the result count.Covers *Filters, Legacy filters, Filter, ListFilterButton*

- `Navigation`13 of 13The product's main navigation.Covers *Navigation bar, Navigation drawer, Navigation rail, Breadcrumb, UI shell left panel, Anchor, Menu, Nav, Navigation Menu, Sidebar, Scrollspy, Breadcrumbs, NavLink, TableOfContents* and 10 morebreadcrumbnestedsidetable-of-contentsbarlocaldrawerrail

- `Panel`New in v0.2**12 of 13Content opened over the current view: a dialog, drawer, sheet or popover.Covers *Bottom sheets, Side sheets, Dialogs, Modal, Popover, Drawer, Dialog, Hover Card, Sheet, Offcanvas, Popovers, FloatingWindow, HoverCard, App window* and 2 moredialogpopoverdrawerpreviewfloatingfullscreen

### Shell

The frame around a product's screens, in the spec since v0.3 so it renders in the same design system as everything else. These are **authored only**: they live in a shell document (`surface.kind` `"shell"`, `surface.origin` `"authored"`), one per product, and the validator refuses them in a surface. A generator never sees them; its surfaces render in the shell's `Outlet`. Command palettes, skip links and phase banners are slots or regions of these rather than components of their own.

- `Frame`New in v0.3Authored only************7 of 13The product's frame: the regions around its screens (header, navigation, main, aside, footer, banner), with an outlet where screens and generated surfaces appear.Covers *UI shell, UI shell right panel, Layout, AppShell, Frame, Application frame, Phase banner, Skip link, Skip Nav*skipTargetasidebanner

- `AppBar`New in v0.3Authored only**********8 of 13The bar at the top of the product: brand or title, a leading action, search, trailing actions and the account.Covers *App bars, Command, Navbar, Spotlight, Fullscreen bar, Top bar, CommandPalette, QuickSearch, Headers, Generic header, GOV.UK header*searchcompact

- `Footer`New in v0.3Authored only**********************2 of 13The bar at the bottom of the product: link groups, the legal line, locale or status.Covers *Footer help, GOV.UK footer, Language navigation*aside

- `Outlet`New in v0.3Authored only**************************0 of 13Where the current screen renders inside a Frame: the host fills it with a screen document or a generated surface.

- `Custom`New in v0.3Authored only************************1 of 13A slot for a component the host implements itself: a logo, a brand moment, a bespoke widget. The document names it and gives it props; the product renders it, and a fallback stands in when it can't.Covers *CopilotAnimation*brand

## Foundations

Not components: the 87 token roles every design-system pack provides and every component draws with. A team maps its own tokens onto these; the [tokens reference](https://polyxd.com/docs/reference/tokens/) lists each one.

- `color`43 rolesSurfaces, text, borders, actions, selection, status and data colours, in every modeCovers *Color, Colors, Palette, Theme*

- `type`8 rolesThe type scale: display, headings, body, captions and numeralsCovers *Typography, Type scale, Text styles, Fonts*

- `space`10 rolesInset and stack spacing, tight to spaciousCovers *Spacing, Space, Sizing*

- `size`3 rolesControl heights and the minimum touch targetCovers *Sizing, Touch targets, Density*

- `radius`5 rolesCorner radii for controls, cards and overlaysCovers *Border radius, Corner radius, Radii*

- `border`2 rolesBorder widthsCovers *Borders, Strokes*

- `focus`2 rolesThe focus ringCovers *Focus ring, Focus states*

- `measure`1 roleThe longest comfortable line of textCovers *Line length*

- `opacity`4 rolesDisabled and overlay opacitiesCovers *Opacity*

- `shadow`2 rolesShadows for raised and overlay surfacesCovers *Elevation, Shadows*

- `motion`7 rolesDurations and easingsCovers *Motion, Animation, Easing, Duration*

## Patterns

Shapes for common jobs, made of components, each with rules the verifier checks. Design systems document these as guidance; Polyxd ships them as [checkable patterns](https://polyxd.com/docs/patterns/).

- `Compare and choose`Put a few options side by side on the same attributes, mark what is better, recommend when there's a clear fit, and let the user choose.

- `Confirm a consequential or destructive action`Before something that is hard or impossible to undo, say exactly what will happen and ask for an explicit, specific confirmation.Covers *Popconfirm, Alert Dialog, ConfirmationDialog, AlertDialog, Confirm a phone number, Confirm an email address, Confirmation pages*

- `Filter and browse`Narrow a large set with a few filters placed before the results, and explain empty results.Covers *Search, Data table, Pagination, Searchbox, Data Table, Filters, Index table, Legacy filters, Search field, DataTable* and 6 more

- `Multi-step form`Collect information in small, ordered chunks: one form when short, Steps when long or dependent.Covers *Progress indicator, Steps, Questionnaire, Stepper, StepList, Task list, Complete multiple tasks, Question pages, Step by step navigation*

- `Review and submit`Before committing, show everything that will be submitted in a scannable summary, then one clear submit action.Covers *Summary list, Check answers*

- `Undo instead of confirm`For everyday actions that can be reversed, do them straight away and offer Undo, instead of asking 'Are you sure?' every time.Covers *Popconfirm, Alert Dialog, ConfirmationDialog, AlertDialog, Confirm a phone number, Confirm an email address, Confirmation pages*

## Done by the renderer

Things a design system ships as components that a generated screen never has to describe: the renderer does them the same way every time, in that design system's style.

- `loading`**12 of 13Skeletons, spinners and progress while data arrivesCovers *Loading indicator, Inline loading, Loading, Skeleton states, Skeleton, Spin, Spinner, Placeholders, Spinners, Loader* and 11 more

- `field`**********8 of 13Labels, help text, required marks and error text around every inputCovers *Field, Label, Floating labels, Validation, Inline error, FormControl, Field label, Help text, Error message*

- `action-feedback`********9 of 13Toasts and snackbars after an action, with Undo for reversible onesCovers *Snackbar, Message, Notification, Toast, Sonner, Toasts, Notifications system*

- `hint`**12 of 13Tooltips and help on hover or focusCovers *Tooltips, Toggletip, Tooltip, Definition tooltip, Info label, ContextualHelp, Toggle Tip*

- `shortcut-hint`************7 of 13Keyboard shortcut hintsCovers *Kbd, Keyboard key, KeybindingHint, Keyboard*

- `scroll-area`****************5 of 13Scroll regions and their scrollbarsCovers *Scroll Area, ScrollArea, Scroller, Scrollable*

- `icon`**************6 of 13Icons, from the design system's own setCovers *Icon, ThemeIcon, Accessible Icon*

- `dismiss`******************4 of 13Closing overlays and dismissing bannersCovers *Close button, CloseButton, Close Button*

- `chart`************************1 of 13Chart scaffolding: axes, legends, tooltipsCovers *Legend, Axis, Scroll-zoom bar*

- `overflow`**********************2 of 13Truncation and overflow menus for what doesn't fitCovers *Overflow, OverflowList*

- `form-errors`************************1 of 13Error summaries at the top of a formCovers *Error summary, Recover from validation errors*

- `ai-disclosure`************************1 of 13Marking generated content as generatedCovers *AI label*

- `affix`**********************2 of 13Sticky bars and back-to-topCovers *Affix*

- `announcements`************************1 of 13Live-region announcements for screen readersCovers *AriaLiveAnnouncer*

- `navigation-toggle`************************1 of 13Opening and closing navigation on small screensCovers *Burger*

- `focus-trap`************************1 of 13Focus management in dialogsCovers *FocusTrap*

- `media-viewer`************************1 of 13Lightboxes for mediaCovers *Lightbox*

- `truncation`************************1 of 13Truncating long textCovers *Truncate*

## Out of scope

137 of the 1,079 entries are flows the product runs itself, or the code that builds it. The shell around a screen (header, navigation, footer) is no longer here: since v0.3 it is the shell components above, authored once per product.

- **Layout primitives**59Box, Stack, Flex, Center, Divider, aspect ratio. The renderer lays out; a document says what belongs together, and Columns or Split when two things sit side by side.

- **Utilities**46Portals, theme providers, visually hidden text. Plumbing for developers, not meaning.

- **The product's own flows**32Guided tours and coach marks, chat windows, cookie consent, sign-up, and password or card fields: a product collects secrets and consent in its own flows, never in a generated screen.

## Every component, by system

Search a name you know from your design system to see what Polyxd calls it.

| System | Their component | Polyxd | Variant | Status |
| --- | --- | --- | --- | --- |