---
title: "Badge"
description: "Badge is a label that indicates status or importance. Badges should provide quick recognition.\\n"
sidebar_label: "Badge"
slug: /reference/components/badge
---

import ComponentDemo from '@site/src/components/ComponentDemo';

# Badge

Badge is a label that indicates status or importance. Badges should provide quick recognition.\n

**Package:** `@terreno/ui`  
**Categories:** Component  
**Props interface:** `BadgeProps`  
**Story source:** [`demo/stories/Badge.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Badge.stories.tsx)

## Live demo

<ComponentDemo name="Badge" />

## Props

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `customBackgroundColor` | `string` |  | When status is "custom", determines the badge's background color. |
| `customBorderColor` | `string` |  | When status is "custom", determines the badge's border color. |
| `customIconColor` | `keyof TextTheme` |  | When status is "custom", determines the badge's icon color |
| `customIconName` | `IconName` |  | When status is "custom", determines the badge's icon |
| `customTextColor` | `string` |  | When status is "custom", determines the badge's text color. |
| `iconName` | `IconName` |  | The name of the icon to display in the badge. |
| `maxValue` | `number` |  | The maximum value to display. Used for "numberOnly" variant to display "$\{maxValue\}+" when value is greater than max. |
| `secondary` | `boolean` |  | If true, the badge will have a secondary style. |
| `status` | `union` |  | The status of the badge. Determines its color and appearance. |
| `testID` | `string` |  | Test ID for unit testing |
| `value` | `union` |  | The text or number to display inside the badge. |
| `variant` | `union` |  | The variant of the badge. Determines if it displays an icon or number only. |