Pill

A small rounded badge that displays a text label with an optional icon at each end. Useful for tags, categories, statuses, or any short metadata. Five size presets control padding and font size. When an onClick handler is provided the pill becomes interactive with a pointer cursor.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | text | string | Yes | — | Label text displayed inside the pill. | | color | string | No | theme primary | Background color. Accepts theme keys or CSS color strings. | | textColor | string | No | theme text | Text and icon color. Accepts theme keys or CSS color strings. | | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | No | 'md' | Controls padding and font size. | | startIcon | string | No | — | Icon name displayed before the text. | | startIconSize | number | No | — | Size of the start icon in pixels. | | startIconStyle | React.CSSProperties | No | — | Inline styles for the start icon. | | endIcon | string | No | — | Icon name displayed after the text. | | endIconSize | number | No | — | Size of the end icon in pixels. | | endIconStyle | React.CSSProperties | No | — | Inline styles for the end icon. | | onClick | () => void | No | — | Click handler. Makes the pill interactive. | | containerStyle | React.CSSProperties | No | — | Inline styles for the pill container. | | textStyle | React.CSSProperties | No | — | Inline styles for the label text span. |

Usage

Basic

import Pill from '@/components/Pill';

export default function Example() {
  return <Pill text="In Stock" color="success" textColor="#fff" />;
}

With icons and click handler

import Pill from '@/components/Pill';

export default function Example() {
  return (
    <Pill
      text="Electronics"
      startIcon="tag"
      endIcon="close"
      size="sm"
      color="#e8f0fe"
      textColor="#1a73e8"
      onClick={() => console.log('Pill clicked')}
    />
  );
}