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.
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>Try it live
← Back to the playground to see Pill rendered with every variant. Or install @kidcash/ui and copy the example above into your own app.