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 |