Skip to main content

Pill

Represents an object or status

http://localhost:3000
<Pill label="In Transit" />

Usage​

Icon​

Include an icon before the pill label.

http://localhost:3000
<Pill icon={<AirplaneFilled />} label="In Transit" />

Color​

Use the colorScheme prop to adjust the color of the pill.

http://localhost:3000
<Pill colorScheme="red" icon={<Clock />} label="On Hold" />

Collapsible​

Set the isCollapsible prop to make the pill collapse by default. The label will display on hover.

http://localhost:3000
<Pill icon={<AirplaneFilled />} isCollapsible label="In Transit" />

Custom theme​

An example of a custom theming

http://localhost:3000
<Pill
  css={{
    backgroundColor: '$colors$palette-green-50',
    '.manifest-pill__text': {
      backgroundColor: 'inherit',
      color: '$palette-green-700',
    },
    '.manifest-pill__icon': {
      backgroundColor: '$palette-green-700',
    },
  }}
  icon={<AirplaneFilled />}
  label="In Transit"
/>

Props​

as?The root element to be rendered