Patterns
Patterns outline how to bring a collection of components together into a reusable solution that solves customer problems and delivers cohesion across our platforms. They are a set of guidelines around a particular user flow or interaction that designers and engineers should follow when creating customer experiences.
There are two primary goals of patterns:
- To drive efficiency across Twilio product teams by ensuring that no one needs to solve the same problem twice.
- To establish cohesion across the full Twilio platform so that users do not need to re-learn how to perform certain actions as they move from product to product.
For more information about how Paste is built and where patterns fit into that hierarchy, read About Paste.
| Name | Status | Code ready | Design assets | Documentation | Peer review |
|---|---|---|---|---|---|
| Button vs Anchor | Production | (n/a) | |||
| Confirmation | Production | (n/a) | (n/a) | (n/a) | |
| Copy text | In development | Pending | Pending | Pending | Pending |
| Create | Production | Pending | Pending | Pending | |
| Data export | Production | ||||
| Delete | Production | Pending | Pending | Pending | |
| Download and export | Production | Pending | |||
| Empty state | Production | ||||
| Error state | Production | Pending | Pending | Pending | |
| Filter | Production | Pending | |||
| Notifications and feedback | Production | Pending | Pending | Pending | |
| Object status | Production | ||||
| Pricing | Production | ||||
| Privacy | Production |
These patterns have been highly requested by Twilio product designers and engineers and have been ranked based on customer impact, ease of work, and how frequently they appear on product UI roadmaps.
Are you working on solutions that use these patterns?
This pattern library relies on contributions from folks like you (yes, YOU). If you are using any of these patterns in your work, or if you are extra passionate about a particular pattern, contribute to the library! It'll be fun. ✨
| Pattern name | Description | Status |
|---|---|---|
| Card actions | How to enable a user to perform actions on objects in a card layout. | Open for contribution |
| Code | How to display code in the UI. | Open for contribution |
| Country flags | How and when to use country flags in the UI. | Open for contribution |
| Component comparisons | Guidance on when to use certain similar components, such as Combobox versus Select. | Open for contribution |
| Errors and error states | How to inform a user when they have encountered different types of errors. | Open for contribution |
| Data grid/table actions | How to enable a user to perform actions on objects or data in a table layout. | Open for contribution |
| Disclose information | How to give the user additional information, using something like help text or a tooltip. | Open for contribution |
| Directional modal | How to enable a user to move forwards and backwards through a set of modals. | Open for contribution |
| Display text | Special text styles for marketing, showing stats, etc. | Open for contribution |
| Drag and drop | How to present drag and drop controls, such as a file upload or a WYSIWYG editor. | Open for contribution |
| Edit object | How to make and apply changes to an object. | Open for contribution |
| Forms | Guidance for laying out forms and patterns for common form interactions. | Open for contribution |
| Layouts | Common page layouts, such as Insights pages, and parts of pages, such as standard page headers. | Open for contribution |
| Loading | Loading states to display to users while data is fetched. | Open for contribution |
| Media player | How to present media controls, such as pause and play. | Open for contribution |
| Onboarding | How to teach a user how to use a new product or feature. | Open for contribution |
| Permissions | How to block access to certain parts of the Twilio UI. | Open for contribution |
| Promotional messaging | How to promote new features and upsells in the UI. | Open for contribution |
| Search | How to enable a user to search a set of data based on an alphanumeric string. | Open for contribution |
| Small detail text | Special text styles for small pieces of descriptive text, such as captions. | Open for contribution |