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 |
|---|---|
| Alert Dialog | Used to confirm an action made by the user. Used to prevent exiting a form in a modal without saving changes |
| Date Picker | A component that allows users to pick a single date from a calendar |
| Status Indicator | How to display the status of an object, process, or user, with accompanying descriptive text. |
| Component | Description |
|---|---|
| Dark theme | |
| 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. |
| 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. |
| Time Picker | A component that allows users to pick a single time from a picker. |
| Component | Description |
|---|---|
| Button Group | A group of connected Buttons |
| Filter group (on page or table) | |
| Form layouts | A group of components with sensible defaults used to quickly layout forms in a consistent manor |
| 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 |
| Component | Description |
|---|---|
| Badge | A small chunk of information that describes an object in a visually highlighted way. |
| Copy text (code, SID) | A pattern for copying text to clipboard. |
| Data visualization color tokens | A set of accessible border and background tokens to be used in charts. |
| Description List | |
| General layout guidance (part of "Layouts") | |
| Small/detail/caption text | |
| Spinner zhoosh | Improved animation and delight for our Spinner component. |
| Toggle Button | A Button that supports two states, pressed and unpressed similar to a like button |
| Toggle Switch | Used to toggle a feature on or off |
| Component | Description |
|---|---|
| Checkbox Button | A checkbox that looks like a Button |
| Checkbox Button Group | A group of checkboxes that look like a Button Group |
| Code Editor / Code editor theme | |
| Combobox, multiselect | A combobox that can be used to select multiple items. |
| Date and Time Picker | A component that allows users to pick a single date and time from a calendar |
| Errors and error states | Can be used in situations where data is empty error states |
| Form zhoosh | Additional animation and delight for our Checkbox and Radio components. |
| Motion |
| Component | Description |
|---|---|
| Button Primitive | |
| Composite Primitive | An unstyled functional primitive used to build accessible grids and listboxes |
| Illustrations | |
| 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 variant | Stylized number often representing a count |
| Blockquote | |
| Button, round variant | |
| Callout | |
| Card actions group | |
| Card layout (part of "Layouts") | |
| Card stack | |
| Carousel | |
| Charts | |
| Charts, Maps | |
| Chat Log | |
| Code | |
| Code Block | Non-editable block of text, formatted in the code text style and with syntax highlighting. |
| Color Picker | |
| Combobox, with clear action | Adding an affordance for clearing text input in a combobox. |
| 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 export pattern | How to move a file or dataset out of Twilio |
| Data visualization | |
| Date Range picker | |
| Date and Time Range Picker | |
| Directional Modal | |
| Disclosure of info | |
| Drag and drop | |
| Dropzone | |
| Edit | |
| 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 | |
| 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 | |
| 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 | |
| Visual Picker | |
| Wireframe kit | |
| Wizard Pattern |