Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar462

Display Pill Group

Version 8.0.1GithubStorybook

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

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'

To help us improve this site, we use tools that set cookies. The data gathered by these tools is anonymized. If you reject the use of cookies, no analytics service will be initiated.