Pill
A small rounded tag element suitable for multi-select inputs, filter chips, and tag lists. Supports an optional remove button, size variants, and two visual style variants.
Basic
React
TypeScript
Davaux
<Pill>React</Pill>
<Pill>TypeScript</Pill>
<Pill>Davaux</Pill>With remove button
Blue
Green
Violet
<Pill withRemoveButton>Blue</Pill>
<Pill withRemoveButton>Green</Pill>Variants
default
contrast
<Pill variant="default">default</Pill>
<Pill variant="contrast">contrast</Pill>Sizes
xs
sm
md
lg
xl
<Pill size="xs">xs</Pill>
<Pill size="sm">sm</Pill>
<Pill size="md">md</Pill>
<Pill size="lg">lg</Pill>
<Pill size="xl">xl</Pill>Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'xs'|'sm'|'md'|'lg'|'xl' | — | Controls pill height and font size |
radius | 'xs'|'sm'|'md'|'lg'|'xl'|string | — | Border-radius of the pill shape |
withRemoveButton | boolean | — | Appends an × remove button |
variant | 'default'|'contrast' | 'default' | Visual style variant |
component | string | 'div' | HTML element to render as root |
class | string | — | Additional CSS class names |
style | object | — | Inline styles |
children | ReactNode | — | Label content inside the pill |