> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Pill

> Show a compact neutral label with an optional icon.

export const StoryEmbed = ({storyId, title, height = 240}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

`Pill` displays a short, non-interactive label. Use [Tag](/ui/primitives/data-display/tag) for colored categories or [Status](/ui/primitives/data-display/status) for a named state with an indicator.

<StoryEmbed storyId="ui-data-display-pill--default" title="Pill example" />

## Usage

```tsx theme={null}
import { Pill } from 'twenty-ui/primitives/data-display';

export const PreviewLabel = () => <Pill label="Preview" />;
```

## With an icon

```tsx theme={null}
import { Pill } from 'twenty-ui/primitives/data-display';
import { IconPaperclip } from 'twenty-ui/icon';

export const AttachmentLabel = () => (
  <Pill label="Attachment" Icon={IconPaperclip} />
);
```

Pass the icon component to `Icon`, rather than a rendered element. Keep a visible label to explain its meaning. The component accepts `label`, `Icon`, and `className`; it does not forward click handlers, children, or native accessibility attributes. Put actions on a separate [Button](/ui/primitives/input/button).

## Props

<ParamField body="className" type="string">
  CSS class applied to the pill.
</ParamField>

<ParamField body="Icon" type="IconComponent">
  Icon component rendered before the label at 12px. Import icons from `twenty-ui/icon`.
</ParamField>

<ParamField body="label" type="string">
  Short text displayed inside the pill.
</ParamField>