# Paste

## Docs

- [Button](https://mintlify.wiki/Twilio-labs/paste/components/actions/button.md): A Button allows a user to perform an action or submit a form.
- [Button Group](https://mintlify.wiki/Twilio-labs/paste/components/actions/button-group.md): A Button Group is a container that groups related buttons together.
- [Menu](https://mintlify.wiki/Twilio-labs/paste/components/actions/menu.md): A Menu displays a list of actions or options that a user can choose.
- [Account Switcher](https://mintlify.wiki/Twilio-labs/paste/components/application/account-switcher.md): Account Switcher allows users to switch between multiple accounts or workspaces.
- [Page Header](https://mintlify.wiki/Twilio-labs/paste/components/application/page-header.md): Page Header displays page titles, metadata, and actions at the top of content areas.
- [Product Switcher](https://mintlify.wiki/Twilio-labs/paste/components/application/product-switcher.md): Product Switcher allows users to navigate between different products or applications.
- [Side Panel](https://mintlify.wiki/Twilio-labs/paste/components/application/side-panel.md): Side Panel is a collapsible panel that slides in from the right side of the screen.
- [Sidebar](https://mintlify.wiki/Twilio-labs/paste/components/application/sidebar.md): Sidebar is a collapsible navigation panel for application navigation.
- [Topbar](https://mintlify.wiki/Twilio-labs/paste/components/application/topbar.md): Topbar is a horizontal navigation bar at the top of the application.
- [User Dialog](https://mintlify.wiki/Twilio-labs/paste/components/application/user-dialog.md): User Dialog displays user information and account actions in a popover menu.
- [AI Chat Log](https://mintlify.wiki/Twilio-labs/paste/components/communication/ai-chat-log.md): AI Chat Log displays conversations with AI assistants.
- [Chat Composer](https://mintlify.wiki/Twilio-labs/paste/components/communication/chat-composer.md): Chat Composer is a rich text input for composing chat messages.
- [Chat Log](https://mintlify.wiki/Twilio-labs/paste/components/communication/chat-log.md): Chat Log displays a chronological list of messages exchanged between users.
- [Footnote](https://mintlify.wiki/Twilio-labs/paste/components/content/footnote.md): Footnote is an inline number used within text to reference citations, additional information, or supplementary details.
- [Summary Detail](https://mintlify.wiki/Twilio-labs/paste/components/content/summary-detail.md): SummaryDetail is a collapsible container that shows a summary and hides detailed content until the user expands it.
- [Avatar](https://mintlify.wiki/Twilio-labs/paste/components/data-display/avatar.md): A component for displaying user or entity avatars with support for images, icons, and initials.
- [Badge](https://mintlify.wiki/Twilio-labs/paste/components/data-display/badge.md): A small label component for displaying status, counts, or categorical information.
- [Card](https://mintlify.wiki/Twilio-labs/paste/components/data-display/card.md): A container component for grouping related content with consistent padding and borders.
- [Code Block](https://mintlify.wiki/Twilio-labs/paste/components/data-display/code-block.md): A component for displaying syntax-highlighted code snippets with copy and external link functionality.
- [Corner Ornament](https://mintlify.wiki/Twilio-labs/paste/components/data-display/corner-ornament.md): CornerOrnament is a container used to apply a cutout to a base component and position another element as its ornament.
- [Data Grid](https://mintlify.wiki/Twilio-labs/paste/components/data-display/data-grid.md): An accessible, interactive data grid component with keyboard navigation for displaying tabular data.
- [Description List](https://mintlify.wiki/Twilio-labs/paste/components/data-display/description-list.md): A component for displaying term-definition pairs in a structured list format.
- [Inline Code](https://mintlify.wiki/Twilio-labs/paste/components/data-display/inline-code.md): A component for displaying inline code snippets within text content.
- [Keyboard Key](https://mintlify.wiki/Twilio-labs/paste/components/data-display/keyboard-key.md): KeyboardKey distinguishes keyboard commands and shortcuts from other text, with support for combinations and visual states.
- [List](https://mintlify.wiki/Twilio-labs/paste/components/data-display/list.md): List components for displaying ordered and unordered lists with customizable styling.
- [Status](https://mintlify.wiki/Twilio-labs/paste/components/data-display/status.md): Status components for displaying process states and connectivity information.
- [Table](https://mintlify.wiki/Twilio-labs/paste/components/data-display/table.md): A Table component for displaying tabular data with support for striping, borders, and scrolling.
- [Timeline](https://mintlify.wiki/Twilio-labs/paste/components/data-display/timeline.md): A component for displaying events or steps in chronological order.
- [Chart Provider](https://mintlify.wiki/Twilio-labs/paste/components/data-visualization/chart-provider.md): ChartProvider is a wrapper component for data visualizations that manages chart state and configuration using Highcharts.
- [Editable Code Block](https://mintlify.wiki/Twilio-labs/paste/components/data-visualization/editable-code-block.md): EditableCodeBlock is a text field that allows users to enter and edit formatted code with syntax highlighting and validation.
- [Alert](https://mintlify.wiki/Twilio-labs/paste/components/feedback/alert.md): An Alert is a banner that notifies users to high-priority or time-sensitive information.
- [Callout](https://mintlify.wiki/Twilio-labs/paste/components/feedback/callout.md): A Callout is a banner that highlights important information on a page.
- [Meter](https://mintlify.wiki/Twilio-labs/paste/components/feedback/meter.md): Meter is a visual representation of a numerical value within a known range.
- [Progress Bar](https://mintlify.wiki/Twilio-labs/paste/components/feedback/progress-bar.md): A Progress Bar communicates the completion status of a process or task.
- [Progress Steps](https://mintlify.wiki/Twilio-labs/paste/components/feedback/progress-steps.md): Progress Steps can be a presentational or interactive component and shows users an outline of a complex multi-step task.
- [Skeleton Loader](https://mintlify.wiki/Twilio-labs/paste/components/feedback/skeleton-loader.md): A Skeleton Loader is a visual placeholder that gives users a hint of what type of information will be loaded on a page.
- [Spinner](https://mintlify.wiki/Twilio-labs/paste/components/feedback/spinner.md): A Spinner is an animation that communicates a loading state to users.
- [Toast](https://mintlify.wiki/Twilio-labs/paste/components/feedback/toast.md): A Toast is an animated, temporary banner that communicates an immediate and direct response to a user action.
- [Base Radio Checkbox](https://mintlify.wiki/Twilio-labs/paste/components/form/base-radio-checkbox.md): BaseRadioCheckbox is a shared base component that provides common functionality and styling for Radio and Checkbox components.
- [Checkbox](https://mintlify.wiki/Twilio-labs/paste/components/form/checkbox.md): A Checkbox is a form element that enables a binary choice. A Checkbox Group is a collection of Checkboxes.
- [Combobox](https://mintlify.wiki/Twilio-labs/paste/components/form/combobox.md): A Combobox is a styled dropdown form element that allows users to either type a value or select a value from a list.
- [Date Picker](https://mintlify.wiki/Twilio-labs/paste/components/form/date-picker.md): A Date Picker is a form element used to select a date.
- [File Picker](https://mintlify.wiki/Twilio-labs/paste/components/form/file-picker.md): A File Picker is a form element used to upload files.
- [File Uploader](https://mintlify.wiki/Twilio-labs/paste/components/form/file-uploader.md): A file uploader is a form element used to upload multiple files.
- [Form](https://mintlify.wiki/Twilio-labs/paste/components/form/form.md): Form provides a semantic container for grouping form controls with consistent spacing and layout.
- [Help Text](https://mintlify.wiki/Twilio-labs/paste/components/form/help-text.md): Help Text is paired with a form element to give users information to prevent or correct formatting errors.
- [Inline Control Group](https://mintlify.wiki/Twilio-labs/paste/components/form/inline-control-group.md): InlineControlGroup is a base component for creating groups of related form controls like checkboxes or radio buttons.
- [Input](https://mintlify.wiki/Twilio-labs/paste/components/form/input.md): An Input is a form element that lets users enter one of various types of text on a single line.
- [Input Box](https://mintlify.wiki/Twilio-labs/paste/components/form/input-box.md): InputBox is the visual wrapper around form input elements, providing consistent styling and support for prefixes and suffixes.
- [Label](https://mintlify.wiki/Twilio-labs/paste/components/form/label.md): A Label is text that provides a visible and accessible name to a form element.
- [Radio Button Group](https://mintlify.wiki/Twilio-labs/paste/components/form/radio-button-group.md): RadioButtonGroup is a set of related, mutually exclusive button-style options where only one can be selected at a time.
- [Radio Group](https://mintlify.wiki/Twilio-labs/paste/components/form/radio-group.md): A Radio Group is a form element that lets users select a single choice from a list of at least two options.
- [Select](https://mintlify.wiki/Twilio-labs/paste/components/form/select.md): A Select is a dropdown form element that allows users to select a value from a list of options.
- [Slider](https://mintlify.wiki/Twilio-labs/paste/components/form/slider.md): A Slider is a draggable input that allows a user to select an imprecise numerical value within a range.
- [Switch](https://mintlify.wiki/Twilio-labs/paste/components/form/switch.md): A switch is an interactive binary control.
- [Textarea](https://mintlify.wiki/Twilio-labs/paste/components/form/textarea.md): A Textarea is a form element that allows users to enter text on multiple lines.
- [Time Picker](https://mintlify.wiki/Twilio-labs/paste/components/form/time-picker.md): A Time Picker is a form element used to select a time.
- [Aspect Ratio](https://mintlify.wiki/Twilio-labs/paste/components/layout/aspect-ratio.md): AspectRatio maintains a consistent width-to-height ratio for media content like videos and images.
- [Box](https://mintlify.wiki/Twilio-labs/paste/components/layout/box.md): Box is the most foundational layout primitive in Paste. It provides direct access to design tokens and serves as the building block for all other layout components.
- [Flex](https://mintlify.wiki/Twilio-labs/paste/components/layout/flex.md): Flex is a layout component that provides a simplified API for building flexbox layouts with design tokens.
- [Grid](https://mintlify.wiki/Twilio-labs/paste/components/layout/grid.md): Grid is a 12-column layout system that provides a flexible way to create responsive grid layouts using design tokens.
- [Media Object](https://mintlify.wiki/Twilio-labs/paste/components/layout/media-object.md): Media Object is a layout pattern for displaying a media element (like an image or icon) alongside text content with consistent alignment and spacing.
- [Separator](https://mintlify.wiki/Twilio-labs/paste/components/layout/separator.md): Separator is a visual divider that helps organize content by creating a horizontal or vertical line between sections.
- [Stack](https://mintlify.wiki/Twilio-labs/paste/components/layout/stack.md): Stack is a layout component that arranges children horizontally or vertically with consistent spacing between items.
- [Anchor](https://mintlify.wiki/Twilio-labs/paste/components/navigation/anchor.md): Anchors (links) allow users to navigate to different pages or locations within a page.
- [Breadcrumb](https://mintlify.wiki/Twilio-labs/paste/components/navigation/breadcrumb.md): Breadcrumbs help users understand their current location within a site hierarchy and navigate between different levels.
- [In Page Navigation](https://mintlify.wiki/Twilio-labs/paste/components/navigation/in-page-navigation.md): In Page Navigation helps users navigate between different sections of content on the same page.
- [Pagination](https://mintlify.wiki/Twilio-labs/paste/components/navigation/pagination.md): Pagination allows users to navigate through pages of content when displaying large data sets.
- [Tabs](https://mintlify.wiki/Twilio-labs/paste/components/navigation/tabs.md): Tabs organize related content into separate views, allowing users to switch between them without leaving the page.
- [Alert Dialog](https://mintlify.wiki/Twilio-labs/paste/components/overlays/alert-dialog.md): An alert dialog is a modal dialog that interrupts the user's workflow to communicate important information and acquire a response.
- [Disclosure](https://mintlify.wiki/Twilio-labs/paste/components/overlays/disclosure.md): A disclosure is an interactive element that toggles the visibility of a section of content.
- [Minimizable Dialog](https://mintlify.wiki/Twilio-labs/paste/components/overlays/minimizable-dialog.md): A minimizable dialog is a floating dialog that can be collapsed into a compact bar while preserving its state.
- [Modal](https://mintlify.wiki/Twilio-labs/paste/components/overlays/modal.md): A modal is a dialog that appears on top of the main content and moves the system into a special mode requiring user interaction.
- [Popover](https://mintlify.wiki/Twilio-labs/paste/components/overlays/popover.md): A popover is a non-modal dialog that floats around a trigger element and displays contextual information or actions.
- [Side Modal](https://mintlify.wiki/Twilio-labs/paste/components/overlays/side-modal.md): A side modal is a dialog that slides in from the right side of the screen and provides a secondary workspace.
- [Tooltip](https://mintlify.wiki/Twilio-labs/paste/components/overlays/tooltip.md): A tooltip is a floating label that briefly explains a UI element or displays keyboard shortcuts.
- [Blockquote](https://mintlify.wiki/Twilio-labs/paste/components/typography/blockquote.md): The Blockquote component displays quoted content with optional citation and source attribution.
- [Detail Text](https://mintlify.wiki/Twilio-labs/paste/components/typography/detail-text.md): The Detail Text component displays small, muted text for supplementary information and metadata.
- [Display Heading](https://mintlify.wiki/Twilio-labs/paste/components/typography/display-heading.md): The Display Heading component provides extra-large headings for prominent page titles and hero sections.
- [Example Text](https://mintlify.wiki/Twilio-labs/paste/components/typography/example-text.md): The Example Text component displays sample input or example values in a visually distinct style.
- [Heading](https://mintlify.wiki/Twilio-labs/paste/components/typography/heading.md): The Heading component provides semantic heading levels with predefined typographic styles.
- [Paragraph](https://mintlify.wiki/Twilio-labs/paste/components/typography/paragraph.md): The Paragraph component provides consistent styling for body text in paragraphs.
- [Text](https://mintlify.wiki/Twilio-labs/paste/components/typography/text.md): The Text primitive is a low-level component for rendering text with extensive styling capabilities.
- [Display Pill Group](https://mintlify.wiki/Twilio-labs/paste/components/utilities/display-pill-group.md): Display Pill Group shows a read-only collection of labeled data items.
- [Form Pill Group](https://mintlify.wiki/Twilio-labs/paste/components/utilities/form-pill-group.md): Form Pill Group provides an interactive collection of removable and selectable items.
- [Screen Reader Only](https://mintlify.wiki/Twilio-labs/paste/components/utilities/screen-reader-only.md): Screen Reader Only visually hides content while keeping it accessible to assistive technology.
- [Truncate](https://mintlify.wiki/Twilio-labs/paste/components/utilities/truncate.md): Truncate shortens text with an ellipsis when it exceeds the available space.
- [Visual Picker](https://mintlify.wiki/Twilio-labs/paste/components/utilities/visual-picker.md): Visual Picker provides radio and checkbox groups with large, visual selection areas.
- [Accessibility](https://mintlify.wiki/Twilio-labs/paste/concepts/accessibility.md): Learn about Paste's accessibility features, WCAG compliance, and best practices for building inclusive user interfaces.
- [Customization](https://mintlify.wiki/Twilio-labs/paste/concepts/customization.md): Learn how to customize Paste components and design tokens to match your brand while maintaining consistency and accessibility.
- [Design Tokens](https://mintlify.wiki/Twilio-labs/paste/concepts/design-tokens.md): Learn about Paste's design token system and how to use tokens to build consistent, themeable user interfaces.
- [Theming](https://mintlify.wiki/Twilio-labs/paste/concepts/theming.md): Learn how to use Paste's theming system to apply different visual styles and create consistent themed experiences.
- [Creating Custom Themes](https://mintlify.wiki/Twilio-labs/paste/customization/creating-custom-themes.md): Build custom themes for Paste by overriding design tokens and creating brand-specific experiences.
- [Custom Components](https://mintlify.wiki/Twilio-labs/paste/customization/custom-components.md): Build custom components with Paste primitives and styling while maintaining consistency with the design system.
- [Customization Provider](https://mintlify.wiki/Twilio-labs/paste/customization/customization-provider.md): Customize Paste components with theme overrides and element-level styling using the Customization Provider.
- [Design Tokens Overview](https://mintlify.wiki/Twilio-labs/paste/customization/design-tokens-overview.md): Understand Paste's design token system and how to use tokens for consistent, maintainable styling.
- [Style Props](https://mintlify.wiki/Twilio-labs/paste/customization/style-props.md): Learn about Paste's style props system for applying responsive, token-based styles to components.
- [Theme Designer](https://mintlify.wiki/Twilio-labs/paste/customization/theme-designer.md): Use the Paste Theme Designer tool to create, preview, and export custom themes visually.
- [Theme Provider](https://mintlify.wiki/Twilio-labs/paste/customization/theme-provider.md): Learn how to use the Theme Provider to apply Paste themes to your application.
- [Getting Started](https://mintlify.wiki/Twilio-labs/paste/getting-started.md): Get up and running with Paste in minutes. Learn how to install, configure, and use Paste components in your React application.
- [Icon List](https://mintlify.wiki/Twilio-labs/paste/icons/icon-list.md): Complete list of all available icons in the Paste icon library
- [Icons Overview](https://mintlify.wiki/Twilio-labs/paste/icons/overview.md): Twilio Paste's comprehensive icon library with accessibility built-in
- [Using Icons](https://mintlify.wiki/Twilio-labs/paste/icons/usage.md): How to import and use Paste icons in your React components
- [Installation](https://mintlify.wiki/Twilio-labs/paste/installation.md): Detailed installation instructions for Paste, including package managers, peer dependencies, and troubleshooting.
- [Introduction to Paste](https://mintlify.wiki/Twilio-labs/paste/introduction.md): Paste is Twilio's design system for building consistent, accessible, and high-quality customer experiences.
- [Codemods](https://mintlify.wiki/Twilio-labs/paste/utilities/codemods.md): Automated code transformations for migrating and updating Paste projects
- [Color Contrast Utils](https://mintlify.wiki/Twilio-labs/paste/utilities/color-contrast-utils.md): Utilities for checking and validating color contrast accessibility in Paste themes
- [UID Library](https://mintlify.wiki/Twilio-labs/paste/utilities/uid-library.md): Generate unique IDs for use in accessible user interfaces