| Accordion | Used to expand and collapse a collection of grouped sections of content
|
| Accordion Primitive | An unstyled functional primitive that is used for the Accordion component, or to roll your own implementation.
|
| Alert / Status Primitive |
|
| Alert Dialog Primitive | An unstyled functional primitive used to build accessible alert dialogs
|
| Avatar with pseudoprop/presence indicator | |
| Badge, counter variant | Stylized number often representing a count
|
| Blockquote | |
| Button Primitive | |
| Button, round variant |
|
| Callout |
|
| Card actions group | |
| Card layout (part of "Layouts") | |
| Card stack | |
| Carousel | |
| Charts |
|
| Charts, Maps | |
| Chat Log |
|
| Code Block | Non-editable block of text, formatted in the code text style and with syntax highlighting.
|
| Code, IDs, and keys |
|
| Color Picker |
|
| Combobox, with clear action | Adding an affordance for clearing text input in a combobox.
|
| Composite Primitive | An unstyled functional primitive used to build accessible grids and listboxes
|
| Data Grid | Interactive data tables, that include selection, sorting, editing
|
| Data Grid sort |
|
| Data Grid with fixed/locked column | |
| Data Grid/table actions group |
|
| Data Table |
|
| Data upload pattern | How to move a file or dataset out of Twilio
|
| Data visualization | |
| Date Range picker |
|
| Date and Time Picker | A component that allows users to pick a single date and time from a calendar
|
| Date and Time Range Picker |
|
| Directional Modal | |
| Disclosure of info | |
| Drag and drop | |
| Dropzone |
|
| Edit | |
| Email (part of "Layouts") | |
| Emoji | |
| Feed Primitive |
|
| Field Checkbox |
|
| Field Combobox |
|
| Field Input | An input component with sensible defaults so you can use the component a with minimal effort
|
| Field Radio |
|
| Field Select |
|
| Field Textarea | A textarea component with sensible defaults
|
| File Input | Input component used to upload or attach files
|
| Filter, search, and table page (part of "Layouts") | |
| Form fields, connected |
|
| Form fields, small | |
| Go to docs | |
| Hyphenate |
|
| Icons, country flags | |
| Image |
|
| Inline editing |
|
| Insights page (part of "Layouts") | |
| Keyboard Shortcut | A component use to represent a keyboard key
|
| Listbox Primitive |
|
| Live Region Primitive |
|
| Loading | |
| Media Player | |
| Meter | A component used a to show a unit of measure between two defined values
|
| Modal, full-screen | Modal Dialog that covers then entire screen
|
| Modal, side | Modal Dialog that covers one side of screen
|
| Nested/hierarchical data (part of "Layouts") | |
| Non-modal Dialog | |
| Number input with stylized buttons |
|
| Onboarding | |
| Ordered List, stylized |
|
| Page header (part of "Layouts") | Compositional examples of headings, breadcrumbs, and page level actions
|
| Permissions | |
| Portal |
|
| Positioner |
|
| Progress Bar |
|
| Progress Stepper |
|
| Promotional messaging and notices | |
| Radio vs. Toggle vs. Checkbox vs. Tabs vs. Dropdown (part of "Component Comparisons") | |
| Rich Text Editor |
|
| Search | |
| Slider |
|
| Summary Detail |
|
| Tabs, nested/scoped | A set of tabs that can be used inside of another tabset that can create distinct visual hierarchy of that tabbed content
|
| Template list | |
| Text, with dotted underline (trigger indicator) | |
| Timeline |
|
| Toolbar |
|
| Toolbar Primitive |
|
| Tree |
|
| Tree Grid |
|
| Tree Grid Primitive |
|
| Treeview Primitive |
|
| Unstyled List |
|
| Visual Picker |
|
| Wireframe kit | |
| Wizard Pattern | |