Pill

Pill displays a short, non-interactive label. Use Tag for colored categories or Status for a named state with an indicator.

Usage

import { Pill } from 'twenty-ui/primitives/data-display';

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

With an icon

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.

Props

string

CSS class applied to the pill.

IconComponent

Icon component rendered before the label at 12px. Import icons from twenty-ui/icon.

string

Short text displayed inside the pill.

Overview

Apps

API

Self-Host

Contribute

UI Library

Usage

With an icon

Props

​Usage

​With an icon

​Props

Usage

With an icon

Props