---
title: Badge
source: https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/sdk-component/indicators/Badge
---

Badges indicate the status of an object.

### Usage

```jsx
import { Badge } from 'nr1'
```

### Examples

#### Basic

```jsx
<div className="nr1-Docs-prettify">
  <Badge>Normal</Badge>
</div>
```

#### Types

```jsx
<div className="nr1-Docs-prettify">
  <Badge>Normal</Badge>
  <Badge type={Badge.TYPE.INFO}>New</Badge>
  <Badge type={Badge.TYPE.SUCCESS}>Success</Badge>
  <Badge type={Badge.TYPE.WARNING}>Warning</Badge>
  <Badge type={Badge.TYPE.CRITICAL}>Critical</Badge>
</div>
```

### Props

| `children` REQUIREDstring\|number | String to render inside the badge. Ellipsis will apply if the content is more than 24 characters.                                                                                                                                                                                                                                                                                                                               |
| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className` string                | Appends class names to the component.Should be used only for positioning and spacing purposes.                                                                                                                                                                                                                                                                                                                                  |
| `spacingType` enum\[]             | Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like `margin` or `padding`. To omit a value, use `SPACING_TYPE.OMIT`. Badge.SPACING_TYPE.EXTRA_LARGE, Badge.SPACING_TYPE.LARGE, Badge.SPACING_TYPE.MEDIUM, Badge.SPACING_TYPE.NONE, Badge.SPACING_TYPE.OMIT, Badge.SPACING_TYPE.SMALL                                                               |
| `style` object                    | Inline style for custom styling.Should be used only for positioning and spacing purposes.                                                                                                                                                                                                                                                                                                                                       |
| `testId` string                   | Adds a `data-test-id` attribute. Use it to target the component in unit and E2E tests.For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.For example, `my-nerdpack.some-element`. **Note:** You might not see `data-test-id` attributes as they are removed from the DOM, to debug them pass a `e2e-test` query parameter to the URL.                                                             |
| `type` enum                       | Type can be: - Normal — indicates general or in-progress status, eg. ‘Coming soon’ or ‘Minor’. - Info - indicates a new, created, or help status, eg. ‘New’, ‘Beta’ or ‘Information’. - Success - indicates a successful state. - Warning - indicates items that require advice state. - Critical - indicates problematic items. Badge.TYPE.CRITICAL, Badge.TYPE.INFOBadge.TYPE.NORMAL, Badge.TYPE.SUCCESS, Badge.TYPE.WARNING, |