# ErrorPill

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

The `ErrorPill` component displays the number of validation errors associated with a field or group of fields. It returns `null` when the count is zero.

## Import

```tsx
import { ErrorPill, useTranslation } from '@payloadcms/ui'
```

## Counts

**Implementation**

```tsx
const { i18n } = useTranslation()

<ErrorPill count={1} i18n={i18n} />
<ErrorPill count={12} i18n={i18n} />
<ErrorPill count={120} i18n={i18n} />
```

**Styling**

Override ErrorPill directly to match the project’s validation color, shape, and emphasis.

```css
.error-pill {
  background: #dc2626;
  color: #ffffff;
  border-radius: 999px;
  font-weight: 600;
}
```

- `background`: Error count surface.
- `color`: Error count text.
- `font-weight`: Count emphasis.

Pass the `i18n` object from `useTranslation`. Add `withMessage` when the count needs a localized “error” or “errors” label.

## 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                                      |
| ------------- | ------------ | ------- | ------------------------------------------------ |
| `count` \*    | `number`     | —       | Number of errors. Renders nothing when set to 0. |
| `i18n` \*     | `I18nClient` | —       | Supplies localized error labels.                 |
| `withMessage` | `boolean`    | `false` | Displays “error” or “errors” after the count.    |
| `className`   | `string`     | —       | Adds a custom class to the element.              |

_\* An asterisk denotes that a prop is required._