Command Palette

Search for a command to run...

Docs
Badge Status

Badge Status

A status badge with dot or icon indicator for success, pending, warning, error, and loading states.

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

PropTypeDefaultDescription
status"success" | "pending" | "warning" | "error" | "loading""success"The status type
childrenReact.ReactNode-Custom label text (optional)
showIconbooleanfalseShow icon instead of dot
showDotbooleantrueShow status dot indicator
classNamestring-Additional CSS classes

Status Types

StatusColorDefault LabelIcon
successGreenSuccessCheck
pendingBluePendingClock
warningAmberWarningAlertTriangle
errorRedErrorX
loadingGrayLoadingLoader2 (spin)