Display Pill Group

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

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>
  );
};