A badge is used to indicate current status in the form of a dot.

This is a custom component crafted to adhere to our styling conventions, resulting in limited styling options and available props.

Anatomy

Import the component.

import { Badge } from "@rafty/ui";

<Badge />;

Status

There are 5 status options in badge: success, warning, error, info & secondary (default).

<div className="flex items-center gap-1 flex-wrap">
  <Badge status="error" />
  <Badge status="info" />
  <Badge status="secondary" />
  <Badge status="success" />
  <Badge status="warning" />
</div>

Size

There are 3 size options available: sm, md (default) & lg

<div className="flex items-center gap-1">
  <Badge size="sm" />
  <Badge size="md" />
  <Badge size="lg" />
</div>