Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - display-pill-group
Getting started
Twilio Paste
Paste UI
Pro
Components
Account Switcher
Ai Chat Log
Alert
Alert Dialog
Anchor
Aspect Ratio
Avatar
Badge
Blockquote
Breadcrumb
Button
Button Group
Callout
Card
Chart Provider
Chat Composer
Chat Log
Checkbox
Code Block
Combobox
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
In Page Navigation
Inline Code
Input
Keyboard Key
Label
List
Media Object
Menu
Meter
Minimizable Dialog
Modal
Multiselect Combobox
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 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
<h3>Accessibility</h3> <p>A label helps explain what a collection of data objects represents. Set a non-visual label on a Display Pill Group using <code>aria-label</code>.</p> <h4>Keyboard navigation</h4> <p>A linked Display Pill is a focusable element and a single tab stop to a keyboard user. Once a user focuses on a linked Display Pill, pressing the enter key will open the link.</p> <h2>Examples</h2> <h3>Basic</h3> <p>Use a Basic Display Pill to display read-only text, such as a list of email addresses or keywords.</p> <div class="example-section"> <div id="basic-example" class="pill-container"></div> </div> <h3>Linked</h3> <p>A Display Pill can link to other pages. This can be useful when the entity the pill represents has its own detail page.</p> <div class="example-section"> <div id="linked-example" class="pill-container"></div> </div> <h3>Display Pill Group</h3> <p>A Display Pill Group wraps a collection of basic and linked Display Pills with a common group component.</p> <div class="example-section"> <div id="group-example" class="pill-container"></div> </div> <h2>Composition Notes</h2> <h3>Truncating text</h3> <p>Pill text should never wrap to the next line. If the text length is longer than the max width of the pill group's container, consider using Truncate.</p> <div class="example-section"> <div class="constrained-width"> <div id="truncate-example" class="pill-container"></div> </div> </div> <h3>Adding an avatar</h3> <p>A Display Pill can have an optional Avatar. We recommend placing the Avatar ahead of the pill text.</p> <div class="example-section"> <div id="avatar-example" class="pill-container"></div> </div> <h3>Adding an icon</h3> <p>A Display Pill can have an optional Icon. We recommend placing the Icon ahead of the pill text.</p> <div class="example-section"> <div id="icon-example" class="pill-container"></div> </div> <h2>When to use a Display Pill Group</h2> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Use Display Pills in non-editable situations to represent a collection of similar objects.</p> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't use Display Pills inside of a form or when editing a collection of data. Use a Multi-select Combobox or Form Pill Group instead.</p> </div> </div> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Use Display Pills to display a list of objects, usually nouns, such as email addresses or keywords.</p> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't use Display Pills to highlight an attribute of an object for quick identification. Consider using a Badge instead.</p> </div> </div> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Only pass DisplayPill as a direct descendent of a DisplayPillGroup.</p> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't pass DisplayPillGroup in any other component type, and do not wrap DisplayPill in any other component of the DOM element.</p> </div> </div> </div> <script> // Wait for modules to load setTimeout(() => { const { DisplayPill, DisplayPillGroup, Avatar, Box, Truncate, AgentIcon, MMSCapableIcon, SMSCapableIcon, ProductVerifyIcon, ProductInterconnectIcon, ProductPhoneNumbersIcon, ProductFrontlineIcon, ProductSegmentIcon, LogoTwilioIcon, ProductInternetOfThingsIcon, ProductMarketingCampaignsIcon, ProductCodeExchangePartnerIcon, ProductEngagementIntelligencePlatformIcon, ProductMessagingIcon, ProductBillingIcon, ProductLookupIcon, ProductConversationsIcon } = window.TwilioPaste; // Main Example const mainExample = document.getElementById('main-example'); mainExample.innerHTML = ` <twilio-display-pill-group aria-label="Capabilities"> <twilio-display-pill> <twilio-mms-capable-icon decorative="true" /> MMS </twilio-display-pill> <twilio-display-pill> <twilio-sms-capable-icon decorative="true" /> SMS </twilio-display-pill> <twilio-display-pill> <twilio-agent-icon decorative="true" /> Voice </twilio-display-pill> <twilio-display-pill> <twilio-avatar size="sizeIcon20" name="Agent" /> Agent Smith </twilio-display-pill> </twilio-display-pill-group> `; // Basic Example const basicExample = document.getElementById('basic-example'); basicExample.innerHTML = ` <twilio-display-pill-group aria-label="Products"> <twilio-display-pill> <twilio-product-verify-icon decorative="true" /> Verify </twilio-display-pill> <twilio-display-pill> <twilio-product-interconnect-icon decorative="true" /> Interconnect </twilio-display-pill> <twilio-display-pill>Basic Pill</twilio-display-pill> </twilio-display-pill-group> `; // Linked Example const linkedExample = document.getElementById('linked-example'); linkedExample.innerHTML = ` <twilio-display-pill-group aria-label="Linked Products"> <twilio-display-pill href="#phone-numbers"> <twilio-product-phone-numbers-icon decorative="true" /> Phone Numbers </twilio-display-pill> <twilio-display-pill href="#frontline"> <twilio-product-frontline-icon decorative="true" /> Frontline </twilio-display-pill> <twilio-display-pill href="#agent"> <twilio-agent-icon decorative="true" /> Agent </twilio-display-pill> <twilio-display-pill href="#avatar"> <twilio-avatar size="sizeIcon20" name="User" /> User Profile </twilio-display-pill> </twilio-display-pill-group> `; // Group Example const groupExample = document.getElementById('group-example'); groupExample.innerHTML = ` <twilio-display-pill-group aria-label="Services"> <twilio-display-pill> <twilio-product-segment-icon decorative="true" /> Segment </twilio-display-pill> <twilio-display-pill> <twilio-logo-twilio-icon decorative="true" /> Twilio </twilio-display-pill> <twilio-display-pill>Service 1</twilio-display-pill> <twilio-display-pill>Service 2</twilio-display-pill> </twilio-display-pill-group> `; // Truncate Example const truncateExample = document.getElementById('truncate-example'); truncateExample.innerHTML = ` <twilio-display-pill-group aria-label="Long Product Names"> <twilio-display-pill> <twilio-product-internet-of-things-icon decorative="true" /> <twilio-truncate>Internet of Things</twilio-truncate> </twilio-display-pill> <twilio-display-pill> <twilio-product-marketing-campaigns-icon decorative="true" /> <twilio-truncate>Marketing Campaigns</twilio-truncate> </twilio-display-pill> <twilio-display-pill> <twilio-product-code-exchange-partner-icon decorative="true" /> <twilio-truncate>Code Exchange Partner</twilio-truncate> </twilio-display-pill> <twilio-display-pill> <twilio-product-engagement-intelligence-platform-icon decorative="true" /> <twilio-truncate>Engagement Intelligence Platform</twilio-truncate> </twilio-display-pill> </twilio-display-pill-group> `; // Avatar Example const avatarExample = document.getElementById('avatar-example'); avatarExample.innerHTML = ` <twilio-display-pill-group aria-label="Team Members"> <twilio-display-pill> <twilio-avatar size="sizeIcon20" name="John Doe" /> John Doe </twilio-display-pill> <twilio-display-pill> <twilio-avatar size="sizeIcon20" name="Jane Smith" /> Jane Smith </twilio-display-pill> <twilio-display-pill> <twilio-avatar size="sizeIcon20" name="Agent" /> <twilio-agent-icon decorative="true" /> Agent </twilio-display-pill> </twilio-display-pill-group> `; // Icon Example const iconExample = document.getElementById('icon-example'); iconExample.innerHTML = ` <twilio-display-pill-group aria-label="Twilio Products"> <twilio-display-pill> <twilio-product-messaging-icon decorative="true" /> Messaging </twilio-display-pill> <twilio-display-pill> <twilio-product-billing-icon decorative="true" /> Billing </twilio-display-pill> <twilio-display-pill> <twilio-product-lookup-icon decorative="true" /> Lookup </twilio-display-pill> <twilio-display-pill> <twilio-product-conversations-icon decorative="true" /> Conversations </twilio-display-pill> </twilio-display-pill-group> `; }, 1000); </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">