Pill

Rounded tags with a leading slot.

Variants

The pill keeps its full radius in every variant. It is the status chip and the tag, not a button.

NetworkConnectFilter

<Pill>Network</Pill>
<Pill variant="solid">Connect</Pill>
<Pill variant="ghost">Filter</Pill>

Sizes

Three heights. md matches the small button.

NewMainnetMarkets

<Pill size="sm">New</Pill>
<Pill size="md">Mainnet</Pill>
<Pill size="lg">Markets</Pill>

Leading

leading takes any node and sits before the label with an 8px gap. A status dot is a Box with a status fill.

Search12.4 SOLHealthyPending

<Pill leading={<Search size={14} />}>Search</Pill>
<Pill leading={<Wallet size={14} />}>
  <Text as="span" variant="body" monospace tabularNums color="inherit">12.4 SOL</Text>
</Pill>
<Pill leading={<Box as="span" width={8} height={8} borderRadius="full" backgroundColor="successFill" />}>
  Healthy
</Pill>

Props

childrenReactNoderequired

The label.

variantPillVariantdefault: 'default'

default and ghost are an 8% tint of the foreground. solid inverts: foreground fill, background ink.

sizePillSizedefault: 'md'

28px, 32px, or 40px tall, with matching padding and text.

leadingReactNode

Rendered before the label: an icon or a status dot.

classNamestring

Appended after the pill's own classes. A bridge for tailwind product code.