Components
Every GDS component is a thin, token-driven wrapper around a Material UI primitive. Pick one to read its when-to-use guidance, see live examples, and copy a typed snippet straight into your app.
Inputs
Components users interact with to provide information or trigger actions.
Button
Primary, secondary, and destructive actions
Button Group
Grouped related button actions
Icon Button
Compact icon-only action - close, edit, delete
Floating Action Button
Primary screen action - create, compose, or add
Checkbox
Toggle a setting or pick multiple from a list
Radio Group
Pick exactly one from a small set
Switch
Turn a single setting on or off
Text Field
Single- and multi-line text input
Date Picker
Pick a calendar date
Select
Pick one value from a short fixed list
Autocomplete
Pick one or more values from a filterable list
Rating
Display or collect a star rating
Navigation
Components for switching between peer views within the same page.
Breadcrumbs
Show the current page location in a hierarchy
Tabs
Toggle between related views with optional icons
Link
Navigate to another page, section, or external resource
Pagination
Move through a known number of pages
Menu
Temporary or composable lists of actions
Data display
Components for surfacing information to the user.
Avatar
User initials, images, or stacked groups
Badge
Counts and status dots on icons or avatars
Chip
Compact labels, filters, and chip actions
Divider
Horizontal or vertical separators
Icon
The curated GDS-approved Material icon set
List
Grouped static or interactive rows
Table
Structured rows and columns of data
Tooltip
Short hints on hover, focus, or long-press
Typography
Headings, paragraphs, captions, labels
Feedback
Components that communicate system state - loading, progress, status. Reach for these whenever the user could otherwise wonder “is anything happening?”
Alert
Inline messages for info, success, warning, and error
Dialog
Modal confirmations and decisions
Progress
Circular and linear loading indicators
Surfaces
Containers that hold related content on a raised or bordered surface.
Paper
Basic elevated surface with mapped MUI elevations
Card
Grouped content with optional header, media, and actions
Layout
Layout primitives for arranging content. Visually invisible by default - they shape how things sit on the page without adding their own styles.