The responsive layout is in early preview. Please report any bugs.
Roadmap
Here's a glimpse of what is coming up in future releases of Paste. Unless explicitly mentioned, all roadmap dates are tentative and subject to change.
| Component | Description |
|---|---|
| Button vs. anchor pattern | Guidelines and an adjusted style for Buttons and Anchors so that hierarchy is appropriately communicated for a high-priority Button CTA and a high-priority Anchor CTA. |
| Empty state pattern | How to inform a user that there is no data to display on a page or section. |
| Pagination | A component with controls that are used to navigate data when it is paged over multiple screens. |
| Component | Description |
|---|---|
| Alert Dialog | Used to confirm an action made by the user. Used to prevent exiting a form in a modal without saving changes |
| Dark theme | |
| Date and Time Picker | A component that allows users to pick a single date and time from a calendar |
| Radio button | A radio button that looks like a Button |
| Skeleton Loader | A component that gives users a hint of what type of information will be loaded on a page and helps reduce the perceived time a page takes to load. |
| Status indicator + label | Used to visually represent a status, system or user, with accompanying descriptive text. |
| Component | Description |
|---|---|
| Badge | A small chunk of information that describes an object in a visually highlighted way. |
| Button Group | A group of connected Buttons |
| Combobox, multiselect | A combobox that can be used to select multiple items. |
| Data visualization color tokens | A set of accessible border and background tokens to be used in charts. |
| Display text | Typographic guidelines for large text meant to be used for marketing, storytelling, or attention-grabbing contexts, like displaying numbers on a dashboard layout. These typically fall outside of the normal use cases for the standard Heading component. |
| Form Key | A box of text that appears at the top of a form that explains what the required indicator on a form field means. |
| Form layouts | A group of components with sensible defaults used to quickly layout forms in a consistent manor |
| Form zhoosh | Additional animation and delight for our Checkbox and Radio components. |
| Pill | A representation of a selection that is typically used in multi-select UI controls such as comboboxes. |
| Radio button group | A group of radio buttons that look like a Button Group |
| Toggle Button | A Button that supports two states, pressed and unpressed similar to a like button |
| Component | Description |
|---|---|
| Date Picker | A component that allows users to pick a single date from a calendar |
| Description list | |
| Filter group (on page or table) | |
| General layout guidance (part of "Layouts") | |
| Spinner zhoosh | Improved animation and delight for our Spinner component. |
| Toggle switch | Used to toggle a feature on or off |
| Component | Description |
|---|---|
| Button Primitive | |
| Code editor / Code editor theme | |
| Composite primitive | An unstyled functional primitive used to build accessible grids and listboxes |
| Copy text (code, SID) | A pattern for copying text to clipboard. |
| Motion | |
| Small/detail/caption text |
| Component | Description |
|---|---|
| Checkbox Button | A checkbox that looks like a Button |
| Checkbox button group | A group of checkboxes that look like a Button Group |
| Errors and error states | Can be used in situations where data is empty error states |
| Component | Description |
|---|---|
| Select vs. Menu vs. Combobox (part of "Component Comparisons") |
| Component | Description |
|---|---|
| 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 | Stylized number often representing a count |
| Blockquote | |
| Button, round | |
| Callout | |
| Card actions group | |
| Card layout (part of "Layouts") | |
| Card selection / Visual picker | |
| Card stack | |
| Carousel | |
| Charts | |
| Charts, Maps | |
| Chat log | |
| Code | |
| Code block (non-editable, with syntax highlighting) | |
| Color picker | |
| Combobox, with clear action | Adding an affordance for clearing text input in a combobox. |
| Create object | |
| Data export pattern | How to move a file or dataset out of Twilio |
| Data grid | Interactive data tables, that include selection, sorting, editing |
| Data grid sort | |
| Data grid/table actions group | |
| Data grid/table with fixed/locked column | |
| Data table | |
| Data visualization | |
| Date and time range picker | |
| Date range picker | |
| Delete object | |
| Directional modal | |
| Disclosure of info | |
| Drag and drop | |
| Dropzone | |
| Edit object | |
| Emoji | |
| Feed Primitive | |
| Field Checkbox | |
| Field Select | |
| Field combobox | |
| Field input | An input component with sensible defaults so you can use the component a with minimal effort |
| Field radio | |
| 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 | |
| Hyphenate | |
| Icons, country flags | |
| Illustrations | |
| 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 (stylized) | |
| Notifications and alerts | |
| Number input with stylized buttons | |
| Object details | |
| Onboarding | |
| Ordered list, stylized | |
| Page header (part of "Layouts") | Compositional examples of headings, breadcrumbs, and page level actions |
| Permissions | |
| Popover header | |
| Portal | |
| Positioner | |
| Progress bar | |
| Progress stepper | |
| Promotional messaging | |
| 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 |
| Text, with dotted underline (trigger indicator) | |
| Timeline | |
| Toolbar | |
| Toolbar Primitive | |
| Tree | |
| Tree Grid | |
| Tree grid Primitive | |
| Treeview Primitive | |
| Unstyled List | |
| Wireframe kit | |
| Wizard pattern |