# ErrorPill

Source: https://payloadcms.com/docs/beta/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

Inside a Payload Admin Panel Custom Component:

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

You can also import the component directly:

```tsx
import { ErrorPill } from '@payloadcms/ui/elements/ErrorPill'
import { useTranslation } from '@payloadcms/ui/providers/Translation'
```

## Counts

**Implementation**

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

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

**Styling**

Override semantic tokens on ErrorPill to customize its validation color and shape without changing danger colors elsewhere in the Admin Panel.

```css
@layer payload {
  .error-pill {
    --color-bg-danger: #b8322c;
    --color-text-ondanger: #ffffff;
    --radius-medium: 999px;
  }
}
```

- `--color-bg-danger`: ErrorPill background.
- `--color-text-ondanger`: ErrorPill count and message color.
- `--radius-medium`: ErrorPill corner radius.

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._