Components

Pill(React)

Small labels that help qualify information.

Version:	`14.18.2` •View source•Changelog•Report issue
Install:	`yarn add @thumbtack/thumbprint-react`
Import:	`import { Pill } from '@thumbtack/thumbprint-react';`

Pill variations

Default

Available

<Pill>Available</Pill>

<Pill>Available</Pill>

Icon & color

In high demand

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

<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>

<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
React.ReactNode
color
Color of the pill text and background.
Type
This prop can be one of the following 6 types:
'green'
'red'
'indigo'
'blue'
'yellow'
'purple'