Installation
Usage
import BadgeStatus from "@/components/ruixen/badge-status";
export default function MyStatus() {
return (
<div className="flex gap-2">
<BadgeStatus status="success" />
<BadgeStatus status="pending">In Review</BadgeStatus>
<BadgeStatus status="warning" showIcon showDot={false} />
<BadgeStatus status="error">Failed</BadgeStatus>
<BadgeStatus status="loading" />
</div>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
status | "success" | "pending" | "warning" | "error" | "loading" | "success" | The status type |
children | React.ReactNode | - | Custom label text (optional) |
showIcon | boolean | false | Show icon instead of dot |
showDot | boolean | true | Show status dot indicator |
className | string | - | Additional CSS classes |
Status Types
| Status | Color | Default Label | Icon |
|---|---|---|---|
success | Green | Success | Check |
pending | Blue | Pending | Clock |
warning | Amber | Warning | AlertTriangle |
error | Red | Error | X |
loading | Gray | Loading | Loader2 (spin) |

