Bringing Cohesion to the Twilio Product Suite: Part II, Navigation - Paste: The Design System for building Twilio customer experiences

Skip to content Skip to navigation Skip to topbar

Twilio Paste

Introduction

For designers

Design guidelines

For engineers

Quick start Manual installation

Contributing

Components Icons Patterns

Working with us

Foundations

Content

Overview Content checklist Voice and tone Product style guide Word list

Data visualization

For engineers

Getting started Accessibility Chart types

Elevation Illustrations Localization Spacing and layout Typography

Patterns

Overview Button vs Anchor Confirmation Create Data export Delete Empty state Error state Filter Form Notifications and feedback Object status Pricing Privacy

Page templates

Overview Object details Objects list Settings Wizard

Experiences

Overview Artificial Intelligence Navigation

Components

Overview AI Chat Log Account Switcher Alert Alert Dialog Anchor Aspect Ratio Avatar Badge Blockquote Breadcrumb Button Button Group Callout Card

Data Visualization

Chat Composer Chat Log Checkbox Code Block

Combobox

Singleselect Multiselect

Corner Ornament Data Grid Date Picker Description List Detail Text Disclosure Display Heading Display Pill Group Editable Code Block Example Text File Picker File Uploader Flex Form Layout Form Pill Group Grid Heading Help Text

Icon

Icon list Usage

In Page Navigation Inline Code Input Keyboard Key Label List Media Object Menu Meter Minimizable Dialog Modal Page Header Pagination Paragraph Popover Product Switcher Progress Bar Progress Steps Radio Button Group Radio Group Screen Reader Only Select Separator Side Modal Side Panel

Sidebar

Sidebar Container Sidebar Navigation

Skeleton Loader Slider Spinner Stack Status Badge Status Menu Summary Detail Switch Table Tabs Textarea Time Picker Timeline Toast Tooltip Topbar Truncate User Dialog Visual Picker

Primitives

Overview Box Combobox Primitive Disclosure Primitive Listbox Primitive Menu Primitive Modal Dialog Primitive Non-modal Dialog Primitive Tabs Primitive Text Tooltip Primitive

Tokens

Overview Token list Design tokens package

Core

Paste core Core changelog Upgrade guide

Libraries

Overview Code Editor Codemods Data visualization Clipboard Copy SVG-to-React UID library VS Code Plugin

Theme

Overview Dark theme Changing the theme

Customization

Overview Customization Provider Customizing themes Customizing components Composing custom UI with tokens

Ask Paste Assistant Ask a question Request a feature Report a bug

Learn more

Design guidelines

Quick start for engineers

Get help

Build with Paste