PillGroup

Renders a list of Pill components from a pills array. Supports row or column layout, configurable gap, and global style and color overrides that apply to all pills unless a specific pill provides its own values. The pillTextKey prop specifies which key of each pill object to use as the label text when pill.text is absent.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | pills | PillItem[] | Yes | — | Array of pill data objects (see below). | | direction | 'row' \| 'column' | No | 'row' | Layout direction of the group. | | gap | number | No | 8 | Gap in pixels between pills. | | pillTextKey | string | No | 'label' | Key used to extract label text when pill.text is not set. | | pillColor | string | No | theme primary | Global background color for all pills (overridable per pill). | | pillTextColor | string | No | theme textShade | Global text color for all pills (overridable per pill). | | pillSize | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | No | — | Global size for all pills (overridable per pill). | | containerStyle | React.CSSProperties | No | — | Inline styles for the group container. | | pillContainerStyle | React.CSSProperties | No | — | Global inline styles for every pill container. | | pillTextStyle | React.CSSProperties | No | — | Global inline styles for every pill label text. |

PillItem shape

| Field | Type | Required | Description | |-------|------|----------|-------------| | id | string \| number | Yes | Unique key for the pill. | | text | string | No | Label text. Falls back to pill[pillTextKey]. | | color | string | No | Per-pill background color. | | textColor | string | No | Per-pill text color. | | startIcon | string | No | Icon name at the start of the pill. | | endIcon | string | No | Icon name at the end of the pill. | | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | No | Per-pill size. | | containerStyle | React.CSSProperties | No | Per-pill container styles. | | textStyle | React.CSSProperties | No | Per-pill text styles. | | startIconStyle | React.CSSProperties | No | Per-pill start icon styles. | | endIconStyle | React.CSSProperties | No | Per-pill end icon styles. | | onClick | () => void | No | Per-pill click handler. |

Usage

Basic tag list

import PillGroup from '@/components/PillGroup';

const tags = [
  { id: 1, text: 'React' },
  { id: 2, text: 'TypeScript' },
  { id: 3, text: 'Node.js' },
];

export default function Example() {
  return <PillGroup pills={tags} pillColor="#e8f0fe" pillTextColor="#1a73e8" />;
}

From API data with custom key

import PillGroup from '@/components/PillGroup';

// API returns: [{ id: 1, name: 'Manager' }, { id: 2, name: 'Viewer' }]
export default function Example({ roles }: { roles: any[] }) {
  return (
    <PillGroup
      pills={roles}
      pillTextKey="name"
      pillSize="sm"
      gap={4}
    />
  );
}