# Pill

Source: https://payloadcms.com/docs/ui-components/pill

The `Pill` component displays compact metadata, a status, or a small action. Keep its label short so it remains easy to scan.

## Import

```tsx
import { Pill } from '@payloadcms/ui'
```

## Styles

**Implementation**

```tsx
<Pill>Default</Pill>
<Pill pillStyle="dark">Dark</Pill>
<Pill pillStyle="success">Success</Pill>
<Pill pillStyle="warning">Warning</Pill>
<Pill pillStyle="error">Error</Pill>
```

**Styling**

Override each semantic Pill modifier to match a customer’s status palette while retaining semantic labels.

```css
.pill--style-success {
  background: #dcfce7;
  color: #166534;
}

.pill--style-warning {
  background: #fef3c7;
  color: #92400e;
}

.pill--style-error {
  background: #fee2e2;
  color: #991b1b;
}
```

- `background`: Semantic Pill surface.
- `color`: Semantic Pill label.

Use semantic styles only when the label represents that state. For example, use `error` for a failed state rather than decoration.

## Shape

**Implementation**

```tsx
<Pill>Default</Pill>
<Pill rounded>Rounded</Pill>
```

**Styling**

Override the base and rounded modifiers independently to establish the project’s preferred badge shape.

```css
.pill {
  border-radius: 4px;
}

.pill--rounded {
  border-radius: 999px;
}
```

- `border-radius`: Corner radius for default and rounded Pills.

Pills use Payload's standard small corner radius by default. Add `rounded` when the label should use a fully rounded shape.

## Sizes

**Implementation**

```tsx
<Pill size="small">Small</Pill>
<Pill size="medium">Medium</Pill>
```

**Styling**

Target a Pill size modifier and override its padding variables to change density without replacing the component.

```css
.pill--size-medium {
  --pill-padding-block-start: 0.375rem;
  --pill-padding-inline-end: 0.75rem;
  --pill-padding-block-end: 0.375rem;
  --pill-padding-inline-start: 0.75rem;
}
```

- `--pill-padding-block-start`: Top padding.
- `--pill-padding-inline-end`: End padding.
- `--pill-padding-block-end`: Bottom padding.
- `--pill-padding-inline-start`: Start padding.

## Common props

These are the props most commonly used with this component. See its exported types in `@payloadcms/ui` for the complete list.

| Prop        | Type                                                                                                  | Default    | Description                              |
| ----------- | ----------------------------------------------------------------------------------------------------- | ---------- | ---------------------------------------- |
| `children`  | `ReactNode`                                                                                           | —          | Visible pill content.                    |
| `pillStyle` | `'light' \| 'light-gray' \| 'dark' \| 'white' \| 'always-white' \| 'success' \| 'warning' \| 'error'` | `'light'`  | Sets the visual style.                   |
| `size`      | `'small' \| 'medium'`                                                                                 | `'medium'` | Sets the pill height and spacing.        |
| `rounded`   | `boolean`                                                                                             | `false`    | Uses a fully rounded shape.              |
| `icon`      | `ReactNode`                                                                                           | —          | Displays an icon beside the label.       |
| `onClick`   | `() => void`                                                                                          | —          | Renders the pill as a button.            |
| `to`        | `string`                                                                                              | —          | Renders the pill as a navigational link. |