Foundations

Pill

Six color variants (default, primary, success, warning, danger, gradient) × three sizes. Optional leading icon and removable close button.

Pill is the catch-all chip primitive. Use it for tags ("allowance", "weekly"), status (success, warning), category badges, leaderboard ranks, anywhere you need a pill-shaped affordance.

Six variants × three sizes = 18 visual presets out of the box. The optional onRemove handler renders a close button that respects the variant's color tokens, so a danger pill's X is correctly contrast-paired with the rest of the chip.

Live preview

defaultprimary✓verifiedwarningdangerpremium

allowancesavingschores

Example

tsx

import { Pill } from '@kidcash/ui';

<Pill variant="success" leadingIcon="✓">Verified</Pill>
<Pill variant="gradient" size="lg">Premium</Pill>
<Pill variant="primary" onRemove={() => removeTag('chores')}>chores</Pill>

Want all 27 in one place?

The home playground shows every component side-by-side. Or install @kidcash/ui and use Pill in your own app.

← Previous

Button

Avatar