-

Document Status Badge

PreviousNext

Status badges for indexed documents, files, knowledge chunks, and ingestion pipelines.

Installation

pnpm
pnpm dlx shadcn@latest add https://ui.zgi.ai/r/document-status-badge.json
npm
pnpm dlx shadcn@latest add https://ui.zgi.ai/r/document-status-badge.json
yarn
yarn dlx shadcn@latest add https://ui.zgi.ai/r/document-status-badge.json

Component

components/ui/document-status-badge.tsx
"use client"

import * as React from "react"
import {
  AlertCircleIcon,
  CheckCircle2Icon,
  CircleDashedIcon,
  FileWarningIcon,
  Loader2Icon,
  PauseCircleIcon,
} from "lucide-react"

import { cn } from "@/lib/utils"
import { Badge } from "@/components/ui/badge"

export type DocumentStatus =
  | "queued"
  | "indexing"
  | "ready"
  | "failed"
  | "paused"
  | "disabled"

export interface DocumentStatusBadgeProps
  extends React.ComponentProps<typeof Badge> {
  status: DocumentStatus
  label?: React.ReactNode
  showIcon?: boolean
}

const statusConfig: Record<
  DocumentStatus,
  {
    label: string
    icon: React.ComponentType<{ className?: string }>
    className: string
  }
> = {
  queued: {
    label: "Queued",
    icon: CircleDashedIcon,
    className: "border-border bg-muted text-muted-foreground",
  },
  indexing: {
    label: "Indexing",
    icon: Loader2Icon,
    className:
      "border-blue-500/20 bg-blue-500/10 text-blue-700 dark:text-blue-300",
  },
  ready: {
    label: "Ready",
    icon: CheckCircle2Icon,
    className:
      "border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
  },
  failed: {
    label: "Failed",
    icon: AlertCircleIcon,
    className: "border-destructive/20 bg-destructive/10 text-destructive",
  },
  paused: {
    label: "Paused",
    icon: PauseCircleIcon,
    className:
      "border-amber-500/25 bg-amber-500/10 text-amber-700 dark:text-amber-300",
  },
  disabled: {
    label: "Disabled",
    icon: FileWarningIcon,
    className:
      "border-slate-500/20 bg-slate-500/10 text-slate-700 dark:text-slate-300",
  },
}

export function DocumentStatusBadge({
  status,
  label,
  showIcon = true,
  className,
  ...props
}: DocumentStatusBadgeProps) {
  const config = statusConfig[status]
  const Icon = config.icon

  return (
    <Badge
      variant="outline"
      className={cn("h-6 gap-1.5 rounded-md px-2", config.className, className)}
      {...props}
    >
      {showIcon ? (
        <Icon
          className={cn("size-3", status === "indexing" && "animate-spin")}
        />
      ) : null}
      {label ?? config.label}
    </Badge>
  )
}

Usage

import { DocumentStatusBadge } from "@/components/ui/document-status-badge"
 
export function Example() {
  return <DocumentStatusBadge status="indexing" />
}

Props

PropTypeDefault
statusDocumentStatusrequired
labelReactNodestatus label
showIconbooleantrue