Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar

Display Pill Group

A Display Pill Group is a set of Pills used to visually represent a collection of entities outside of form-based UIs.

Version 8.0.1
Github
Storybook

Installation

Installation page anchor
yarn add @twilio-paste/display-pill-group - or - yarn add @twilio-paste/core

Usage

Usage page anchor
import {AgentIcon} from '@twilio-paste/icons/esm/AgentIcon';
import {Avatar} from '@twilio-paste/core/display-pill-group';
import {DisplayPillGroup, DisplayPill} from '@twilio-paste/core/display-pill-group';
import {MMSCapableIcon} from '@twilio-paste/icons/esm/MMSCapableIcon';
import {SMSCapableIcon} from '@twilio-paste/icons/esm/SMSCapableIcon';

const DisplayPillGroupExample = () => {
  return (
    <DisplayPillGroup aria-label="Products:">
      <DisplayPill>Voice</DisplayPill>
      <DisplayPill href="https://google.com">Studio</DisplayPill>
      <DisplayPill>
        <SMSCapableIcon decorative size="sizeIcon10" />
        SMS
      </DisplayPill>
      <DisplayPill href="https://google.com">
        <MMSCapableIcon decorative size="sizeIcon10" />
        MMS
      </DisplayPill>
      <DisplayPill>
        <Avatar size="sizeIcon10" name="Customer" src="/images/avatars/avatar4.png" />
        Customer
      </DisplayPill>
      <DisplayPill href="https://google.com">
        <Avatar size="sizeIcon10" name="Agent" icon={AgentIcon} />
        Agent
      </DisplayPill>
    </DisplayPillGroup>
  );
};

Props

Props page anchor

DisplayPill

DisplayPill page anchor

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'DISPLAY_PILL'

DisplayPillGroup

DisplayPillGroup page anchor

aria-label RequiredRequired

Defines a string value that labels the DisplayPillGroup

Type
string

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'DISPLAY_PILL_GROUP'