---
id: badge
title: Badge
---

import { IconsStyle } from "@site/src/components/Docs_Icons";
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import CodeBlock from "@theme/CodeBlock";
import { BiInfoCircle } from "react-icons/bi";
import Usage from "../component_usage/Badge.mdx";
import Play from "@site/playground/Badge/badge.playground";

<IconsStyle />

Badges are small components typically used to communicate a numerical value or indicate the status of an item to the user.

## Usage

<div class="row inline-flex-center">
  <div class="col col--3">
    <h4>Import</h4>
  </div>
  <div class="col col--9">
    <CodeBlock>{`import { Badge } from '@rneui/themed';`}</CodeBlock>
  </div>
  <div class="col col--3">
    <h4>
      Theme Key{" "}
      <a href="../customizing#using-themeprovider">
        <BiInfoCircle />
      </a>
    </h4>
  </div>
  <div class="col col--9">
    <CodeBlock>{`Badge`}</CodeBlock>
  </div>
</div>

<Usage />

## Props

<div class='table-responsive'>

| Name             | Type                                           | Default                                           | Description                                               |
| ---------------- | ---------------------------------------------- | ------------------------------------------------- | --------------------------------------------------------- |
| `Component`      | React Component                                | `Press handlers present then Pressable else View` | Custom component to replace the badge outer component.    |
| `badgeStyle`     | View Style                                     |                                                   | Additional styling for badge (background) view component. |
| `containerStyle` | View Style                                     |                                                   | Style for the container.                                  |
| `onLongPress`    | GestureResponderEventHandler                   |                                                   | Called when a long-tap gesture is detected.               |
| `onPress`        | Function                                       |                                                   | Called when a single tap gesture is detected.             |
| `onPressIn`      | GestureResponderEventHandler                   |                                                   | Called when a touch is engaged before `onPress`.          |
| `onPressOut`     | GestureResponderEventHandler                   |                                                   | Called when a touch is released before `onPress`.         |
| `pressableProps` | PressableProps except click handlers           | `None`                                            |                                                           |
| `status`         | `primary` \| `success` \| `warning` \| `error` | `primary`                                         | Determines color of the indicator.                        |
| `textProps`      | TextProps                                      |                                                   | Extra props for text component.                           |
| `textStyle`      | Text Style                                     |                                                   | Extra styling for icon component.                         |
| `value`          | ReactNode                                      |                                                   | Text value to be displayed by badge, defaults to empty.   |

</div>

## Playground

<Play />
