UI component examples
Buttons, forms, menus and all the little decisions hiding inside them.
Actions
Buttons, links and menus for getting something done or going somewhere else.
Forms and input
The fields and controls people meet whenever a product needs an answer.
Checkbox
Color picker
Color area
Combobox
Autocomplete, Autosuggest, Combo box, Typeahead
Date picker
Date input, Datepicker
Date range picker
Fieldset
Field group, Field groups, Fieldsets, Input group, Input groups, InputGroup, Text input group
File upload
Dropzone, File chooser, file drop, File input, File picker, File uploader, Fileinput, Multiple file upload, Upload
Filter
Filter bar
Form
Form layout
Label
Form label, Helper text, Hint, help text
Multiselect
Multi select, Multi select menu
Number input
Number field
OTP input
Input OTP, One-time password input, PIN input, Verification code input
Password input
Phone input
Radio button
Radio, Radio box group, Radio group, Radiobutton, Radios
Rating
Rate
Search input
Dynamic search, Search, Search field
Segmented control
Content switcher, segment control, Segmented, Toggle group
Select
Form select, Select input, Selection, Single select menu
Slider
Range slider, Range input, Range
Text input
Input, Input field, Text field, text fields, Textinput
Textarea
Text area, Textbox, Text box
Time picker
Time input
Toggle
Switch, Toggle switch, Lightswitch
Feedback and status
Messages and indicators that explain what happened and what needs attention.
Alert
Feedback, Message, Callout, Flashbar, Banner
Badge
Chip, Pill, Tag
Empty state
blankslate, Empty, Illustrated message
Error summary
Error message, Error messages, Error summaries, Error text, Field error, Validation error, Validation errors, Validation message
Meter
Gauge
Notification
Notification badge, Notification banner, Notification drawer, Notification group
Progress bar
Progress, Loading bar
Progress indicator
Progress tracker, Progress steps, Progress stepper, Stepper, Steps, Step
Skeleton
Skeleton avatar, Skeleton loader, Skeleton table
Spinner
Inline loader, Inline loading, Loader, Loading, Loading icon, Loading indicator, Spin
Toast
Toast group, Snackbar
Tooltip
infotip, Toggletip
Data display
Tables, charts and repeated content with a lot of information to carry.
Content and media
The building blocks for words, images, code and video.
Blockquote
Quote, Pull quote, Block quote
Code block
Code, Code editor, Code snippet, Code view, Inline code
Heading
Headline, Display heading, Page heading, Title, Subheading
Icon
Icon list
Image
Picture
Paragraph
Text, Text block
Rich text editor
Editor, Markdown editor, RTE, Text editor, WYSIWYG
Video
Video player
Visually hidden
Screen reader only, Screenreader only
Layout and structure
The parts that give a page its frame and keep the content in order.
Accordion
Collapse, Collapsible, Collapsible sections, Details, Disclosure, Expandable, Expandable section, Expander
Aspect ratio
Card
Tile
Divider
Separator, Horizontal rule, Vertical rule
Footer
Globalfooter
Header
Globalheader, Masthead
Layout
Container, Grid, Grid item, Page layout, Section layout, Spacer, Split page layout, Split view, Stack
Overlays
Panels that sit above the page for a task, decision or useful bit of context.
AI and conversation
The newer controls built around prompts and ongoing conversations.
Other
New and uncategorized component patterns.
Calendar
Calendar grid, Calendar month, Calendar view, Calendars, Event calendar, Mini calendar
Description list
Description, Description lists, Descriptions, Key-value list, Key-value pairs, Label-value pair, Summary list
Field
Field container, Field wrapper, Fields, Form field, Form fields, Form group
Kbd
Key binding hint, Keybinding hint, Keyboard key, Keyboard key group, Keyboard keys, Keyboard shortcut, Keyboard shortcut hint, Keyboard shortcuts
Menu
Menu item, Menu items, Menubar, Menus
QR code
QR codes, Qrcode
Toggle button
Toggle button group, Toggle buttons, ToggleButton, ToggleButtonGroup