# Badge component for Stripe Apps

Use badges to indicate the state of an item or object.

# v8

> This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/badge?app-sdk-version=8.

Unlike [buttons](https://docs.stripe.com/stripe-apps/components/button.md), badges are read-only and don’t perform any actions, such as `onPress` events. Use badges to indicate the state of an item or object in your applications user interface.

To add the `Badge` component to your app:

```js
import {Badge} from '@stripe/ui-extension-sdk/ui';
```

The following types of badges are available:

- **Neutral**: Neutral label, no action required, everything is working as expected
- **Info**: Identifies an object or action with an important attribute or a key state
- **Positive**: Positive, neutral and important outcome or category, no action required
- **Negative**: Negative, important outcome or category, no action required
- **Warning**: Needs immediate action, optional to resolve
- **Urgent**: Needs immediate action, strong requirement to resolve

### Badge props

| Property   | Type                                                                                             |
| ---------- | ------------------------------------------------------------------------------------------------ |
| `children` | (Required)
  `React.ReactNode`

  The contents of the component.                                 |
| `type`     | (Optional)
  `("neutral" | "urgent" | "warning" | "negative" | "positive" | "info") | undefined` |


# v9

> This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/badge?app-sdk-version=9.

Unlike [buttons](https://docs.stripe.com/stripe-apps/components/button.md), badges are read-only and don’t perform any actions, such as `onPress` events. Use badges to indicate the state of an item or object in your applications user interface.

To add the `Badge` component to your app:

```js
import {Badge} from '@stripe/ui-extension-sdk/ui';
```

The following types of badges are available:

- **Neutral**: Neutral label, no action required, everything is working as expected
- **Info**: Identifies an object or action with an important attribute or a key state
- **Positive**: Positive, neutral and important outcome or category, no action required
- **Negative**: Negative, important outcome or category, no action required
- **Warning**: Needs immediate action, optional to resolve
- **Urgent**: Needs immediate action, strong requirement to resolve

### Badge props

| Property   | Type                                                                                             |
| ---------- | ------------------------------------------------------------------------------------------------ |
| `children` | (Required)
  `React.ReactNode`

  The contents of the component.                                 |
| `type`     | (Optional)
  `("neutral" | "urgent" | "warning" | "negative" | "positive" | "info") | undefined` |


## See also

- [Design patterns to follow](https://docs.stripe.com/stripe-apps/patterns.md)
- [Style your app](https://docs.stripe.com/stripe-apps/style.md)
- [UI testing](https://docs.stripe.com/stripe-apps/ui-testing.md)