Components

Pill(React)

Small labels that help qualify information.

Version:6.1.0 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-react
Import:import { Pill } from '@thumbtack/thumbprint-react';

Pill variations

Default

Available
<Pill>Available</Pill>

Icon & color

In high demand
<Pill color="red" icon={<ContentModifierTrophyTiny />}>
    In high demand
</Pill>

Multiple

Highly rated
Fast response
<div>
    <span className="mr2">
        <Pill color="blue">Highly rated</Pill>
    </span>
    <span>
        <Pill color="green" icon={<ContentModifierLightningTiny />}>
            Fast response
        </Pill>
    </span>
</div>

Props

Pill

  • children
    required

    Text content to render.

    Type
    string
  • icon

    “Tiny” size icon to render.

    Type
    node
    Default
    undefined
  • color

    Color of the pill text and background.

    Type
    oneOf([
      'green',
      'red',
      'indigo',
      'blue',
      'yellow',
      'purple',
    ])
    Default
    undefined