---
sidebar_position: 4
---

import { Badge, Text, Avatar } from "rizzui";
import { ShoppingBagIcon, ShoppingCartIcon } from "@heroicons/react/24/outline";
import Paper from "@site/src/components/paper";

# Badge

Badge is a small overlapped UI item which indicates a status, notification, or event that appears in relativity with the underlying object.

```tsx
import { Badge } from "rizzui";
```

<div className="mb-20 md:mb-28" />

## Default

The default style of **Badge** component.

<Paper>
  <Badge>Badge</Badge>
</Paper>

```tsx
import { Badge } from "rizzui";

export default function App() {
  return <Badge>Badge</Badge>;
}
```

<div className="mb-16" />

## Variants

You can change the style of the **Badge** using [**variant**](#badge-variants) property.

<Paper>
  <div className="flex items-center justify-around gap-3 w-full flex-wrap">
    <Badge variant="outline">Badge</Badge>
    <Badge variant="flat">Badge</Badge>
    <Badge>Badge</Badge>
  </div>
</Paper>

```tsx
import { Badge } from "rizzui";

export default function App() {
  return (
    <>
      <Badge variant="outline">Badge</Badge>
      <Badge variant="flat">Badge</Badge>
      <Badge>Badge</Badge>
    </>
  );
}
```

<div className="mb-16" />

## Sizes

You can change the size of the **Badge** using [**size**](#badge-sizes) property.

<Paper>
  <div className="flex items-center justify-around gap-3 w-full flex-wrap">
    <Badge size="sm">Badge</Badge>
    <Badge>Badge</Badge>
    <Badge size="lg">Badge</Badge>
    <Badge size="xl">Badge</Badge>
  </div>
</Paper>

```tsx
import { Badge } from "rizzui";

export default function App() {
  return (
    <>
      <Badge size="sm">Badge</Badge>
      <Badge>Badge</Badge>
      <Badge size="lg">Badge</Badge>
      <Badge size="xl">Badge</Badge>
    </>
  );
}
```

<div className="mb-16" />

## Rounded

You can change the border radius of the **Badge** using [**rounded**](#badge-rounded) property.

<Paper>
  <div className="flex items-center justify-around gap-3 w-full flex-wrap">
    <Badge rounded="none">Badge</Badge>
    <Badge rounded="sm">Badge</Badge>
    <Badge rounded="md">Badge</Badge>
    <Badge rounded="lg">Badge</Badge>
    <Badge>Badge</Badge>
  </div>
</Paper>

```tsx
import { Badge } from "rizzui";

export default function App() {
  return (
    <>
      <Badge rounded="none">Badge</Badge>
      <Badge rounded="sm">Badge</Badge>
      <Badge rounded="md">Badge</Badge>
      <Badge rounded="lg">Badge</Badge>
      <Badge>Badge</Badge>
    </>
  );
}
```

<div className="mb-16" />

## Colors

You can change the color of the **Badge** using [**color**](#badge-colors) property.

<Paper>
  <div className="flex items-center justify-around gap-3 w-full flex-wrap mb-10">
    <Badge>Badge</Badge>
    <Badge color="secondary">Badge</Badge>
    <Badge color="info">Badge</Badge>
    <Badge color="warning">Badge</Badge>
    <Badge color="danger">Badge</Badge>
    <Badge color="success">Badge</Badge>
  </div>
  <div className="flex items-center justify-around gap-3 w-full flex-wrap mb-10">
    <Badge variant="flat">Badge</Badge>
    <Badge
      variant="flat"
      color="secondary"
    >
      Badge
    </Badge>
    <Badge
      variant="flat"
      color="info"
    >
      Badge
    </Badge>
    <Badge
      variant="flat"
      color="warning"
    >
      Badge
    </Badge>
    <Badge
      variant="flat"
      color="danger"
    >
      Badge
    </Badge>
    <Badge
      variant="flat"
      color="success"
    >
      Badge
    </Badge>
  </div>
  <div className="flex items-center justify-around gap-3 w-full flex-wrap">
    <Badge variant="outline">Badge</Badge>
    <Badge
      variant="outline"
      color="secondary"
    >
      Badge
    </Badge>
    <Badge
      variant="outline"
      color="info"
    >
      Badge
    </Badge>
    <Badge
      variant="outline"
      color="warning"
    >
      Badge
    </Badge>
    <Badge
      variant="outline"
      color="danger"
    >
      Badge
    </Badge>
    <Badge
      variant="outline"
      color="success"
    >
      Badge
    </Badge>
  </div>
</Paper>

```tsx
import { Badge } from "rizzui";

export default function App() {
  return (
    <>
      {/* variant solid / default */}
      <div className="flex items-center justify-around gap-3 w-full flex-wrap mb-10">
        <Badge>Badge</Badge>
        <Badge color="secondary">Badge</Badge>
        <Badge color="info">Badge</Badge>
        <Badge color="warning">Badge</Badge>
        <Badge color="danger">Badge</Badge>
        <Badge color="success">Badge</Badge>
      </div>
      {/* variant flat */}
      <div className="flex items-center justify-around gap-3 w-full flex-wrap mb-10">
        <Badge variant="flat">Badge</Badge>
        <Badge
          variant="flat"
          color="secondary"
        >
          Badge
        </Badge>
        <Badge
          variant="flat"
          color="info"
        >
          Badge
        </Badge>
        <Badge
          variant="flat"
          color="warning"
        >
          Badge
        </Badge>
        <Badge
          variant="flat"
          color="danger"
        >
          Badge
        </Badge>
        <Badge
          variant="flat"
          color="success"
        >
          Badge
        </Badge>
      </div>
      {/* variant outline */}
      <div className="flex items-center justify-around gap-3 w-full flex-wrap">
        <Badge variant="outline">Badge</Badge>
        <Badge
          variant="outline"
          color="secondary"
        >
          Badge
        </Badge>
        <Badge
          variant="outline"
          color="info"
        >
          Badge
        </Badge>
        <Badge
          variant="outline"
          color="warning"
        >
          Badge
        </Badge>
        <Badge
          variant="outline"
          color="danger"
        >
          Badge
        </Badge>
        <Badge
          variant="outline"
          color="success"
        >
          Badge
        </Badge>
      </div>
    </>
  );
}
```

<div className="mb-16" />

## Dot

You can render **Badge** as dot using **renderAsDot** property.

<Paper>
  <div className="flex flex-col gap-6 text-sm">
    <div className="flex items-center gap-2">
      <Badge renderAsDot />
      <Text>Primary</Text>
    </div>
    <div className="flex items-center gap-2">
      <Badge
        renderAsDot
        color="secondary"
      />
      <Text>Secondary</Text>
    </div>
    <div className="flex items-center gap-2">
      <Badge
        renderAsDot
        color="danger"
      />
      <Text>Danger</Text>
    </div>
    <div className="flex items-center gap-2">
      <Badge
        renderAsDot
        color="warning"
      />
      <Text>Warning</Text>
    </div>
    <div className="flex items-center gap-2">
      <Badge
        renderAsDot
        color="success"
      />
      <Text>Success</Text>
    </div>
    <div className="flex items-center gap-2">
      <Badge
        renderAsDot
        color="info"
      />
      <Text>Info</Text>
    </div>
  </div>
</Paper>

```tsx
import { Badge, Text } from "rizzui";

export default function App() {
  return (
    <>
      <div className="flex items-center gap-2">
        <Badge renderAsDot />
        <Text>Primary</Text>
      </div>
      <div className="flex items-center gap-2">
        <Badge
          renderAsDot
          color="secondary"
        />
        <Text>Secondary</Text>
      </div>
      <div className="flex items-center gap-2">
        <Badge
          renderAsDot
          color="danger"
        />
        <Text>Danger</Text>
      </div>
      <div className="flex items-center gap-2">
        <Badge
          renderAsDot
          color="warning"
        />
        <Text>Warning</Text>
      </div>
      <div className="flex items-center gap-2">
        <Badge
          renderAsDot
          color="success"
        />
        <Text>Success</Text>
      </div>
      <div className="flex items-center gap-2">
        <Badge
          renderAsDot
          color="info"
        />
        <Text>Info</Text>
      </div>
    </>
  );
}
```

<div className="mb-16" />

## With Icon

You can use **Badge** to make a ecommerce cart counter component.

<Paper>
  <div className="flex items-center justify-around gap-3 w-full flex-wrap">
    <div className="relative inline-flex">
      <ShoppingBagIcon
        className="h-auto w-8"
        strokeWidth={1.2}
      />
      <Badge
        size="sm"
        enableOutlineRing
        className="absolute right-0 top-0 -translate-y-1/3 translate-x-1/2"
      >
        99
      </Badge>
    </div>
    <div className="relative ml-3 inline-flex">
      <ShoppingCartIcon
        className="h-auto w-8"
        strokeWidth={1.2}
      />
      <Badge
        size="sm"
        color="success"
        enableOutlineRing
        className="absolute right-0 top-0 -translate-y-1/3 translate-x-1/2"
      >
        99+
      </Badge>
    </div>
    <div className="relative ml-3 inline-flex">
      <ShoppingBagIcon
        className="h-auto w-8"
        strokeWidth={1.2}
      />
      <Badge
        size="sm"
        color="danger"
        enableOutlineRing
        className="absolute right-0 top-0 -translate-y-1/3 translate-x-1/2"
      >
        999+
      </Badge>
    </div>
  </div>
</Paper>

```tsx
import { Badge } from "rizzui";
import { ShoppingBagIcon, ShoppingCartIcon } from "@heroicons/react/24/outline";

export default function App() {
  return (
    <>
      <div className="relative inline-flex">
        <ShoppingBagIcon
          className="h-auto w-8"
          strokeWidth={1.2}
        />
        <Badge
          size="sm"
          enableOutlineRing
          className="absolute right-0 top-0 -translate-y-1/3 translate-x-1/2"
        >
          99
        </Badge>
      </div>
      <div className="relative ml-3 inline-flex">
        <ShoppingCartIcon
          className="h-auto w-8"
          strokeWidth={1.2}
        />
        <Badge
          size="sm"
          color="success"
          enableOutlineRing
          className="absolute right-0 top-0 -translate-y-1/3 translate-x-1/2"
        >
          99+
        </Badge>
      </div>
      <div className="relative ml-3 inline-flex">
        <ShoppingBagIcon
          className="h-auto w-8"
          strokeWidth={1.2}
        />
        <Badge
          size="sm"
          color="danger"
          enableOutlineRing
          className="absolute right-0 top-0 -translate-y-1/3 translate-x-1/2"
        >
          999+
        </Badge>
      </div>
    </>
  );
}
```

<div className="mb-16" />

## With Avatar

You can use the **Badge** with **Avatar** component to show the current state of user.

<Paper>
  <div className="flex items-center justify-around gap-3 w-full flex-wrap">
    <div className="relative inline-flex">
      <Avatar
        name="John Doe"
        size="lg"
        src="https://randomuser.me/api/portraits/women/40.jpg"
      />
      <Badge
        size="lg"
        renderAsDot
        color="success"
        enableOutlineRing
        className="absolute right-0 top-0 -translate-y-[25%]"
      />
    </div>
    <div className="relative ml-3 inline-flex">
      <Avatar
        name="John Doe"
        size="lg"
        src="https://randomuser.me/api/portraits/women/43.jpg"
      />
      <Badge
        size="lg"
        renderAsDot
        color="danger"
        enableOutlineRing
        className="absolute right-0 bottom-0 -translate-y-[25%]"
      />
    </div>
    <div className="relative ml-3 inline-flex">
      <Avatar
        name="John Doe"
        size="lg"
        src="https://randomuser.me/api/portraits/women/44.jpg"
      />
      <Badge
        size="lg"
        renderAsDot
        color="warning"
        enableOutlineRing
        className="absolute right-0 top-0 -translate-y-[30%]"
      />
    </div>
  </div>
</Paper>

```tsx
import { Badge, Avatar } from "rizzui";

export default function App() {
  return (
    <>
      <div className="relative inline-flex">
        <Avatar
          name="John Doe"
          size="lg"
          src="https://randomuser.me/api/portraits/women/40.jpg"
        />
        <Badge
          size="lg"
          renderAsDot
          color="success"
          enableOutlineRing
          className="absolute right-0 top-0 -translate-y-[25%]"
        />
      </div>
      <div className="relative ml-3 inline-flex">
        <Avatar
          name="John Doe"
          size="lg"
          src="https://randomuser.me/api/portraits/women/43.jpg"
        />
        <Badge
          size="lg"
          renderAsDot
          color="danger"
          enableOutlineRing
          className="absolute right-0 bottom-0 -translate-y-[25%]"
        />
      </div>
      <div className="relative ml-3 inline-flex">
        <Avatar
          name="John Doe"
          size="lg"
          src="https://randomuser.me/api/portraits/women/44.jpg"
        />
        <Badge
          size="lg"
          renderAsDot
          color="warning"
          enableOutlineRing
          className="absolute right-0 top-0 -translate-y-[30%]"
        />
      </div>
    </>
  );
}
```

<div className="mb-20" />

## API Reference

<hr />

<div className="mb-10" />

### Badge Props

Here is the API documentation of the Badge component. You can use props like **id**, **title**, **onClick** etc.

<div className="overflow-x-auto">

|       Props       |               Type               |                                      Description                                       |   Default   |
| :---------------: | :------------------------------: | :------------------------------------------------------------------------------------: | :---------: |
|     children      |        `React.ReactNode`         |                          Accepts everything React can render                           |    \_\_     |
|      variant      | [BadgeVariants](#badge-variants) |                                 Set the Badge variants                                 |  `"solid"`  |
|       size        |    [BadgeSizes](#badge-sizes)    | Set the size of the component. <br /> `"sm"` is equivalent to the dense Badge styling. |   `"md"`    |
|      rounded      |  [BadgeRounded](#badge-rounded)  |                        Set border radius of the Badge component                        |  `"full"`   |
|       color       |   [BadgeColors](#badge-colors)   |                                   Change Badge color                                   | `"primary"` |
| enableOutlineRing |            `boolean`             |                Set a outline ring. It is useful for the overlapping UI.                |    \_\_     |
|    renderAsDot    |            `boolean`             |                                 Render badge as a dot                                  |    \_\_     |
|     className     |             `string`             |                           Add custom classes for extra style                           |    \_\_     |

</div>

<div className="mb-10" />

### Badge Variants

```ts
type BadgeVariants = "solid" | "flat" | "outline";
```

<div className="mb-10" />

### Badge Sizes

```ts
type BadgeSizes = "sm" | "md" | "lg" | "xl";
```

<div className="mb-10" />

### Badge Rounded

```ts
type BadgeRounded = "none" | "sm" | "md" | "lg" | "full";
```

<div className="mb-10" />

### Badge Colors

```ts
type BadgeColors = "primary" | "secondary" | "danger" | "info" | "success" | "warning";
```
