Getting Started
Components
- Agent Status
- Agent Template Card
- API Key Card
- Audio Player
- Bar Visualizer
- Channel Status Card
- Chat Composer
- Code Editor
- Condition Builder
- Confirm Dialog
- Conversation
- Conversation Bar
- Dataset Card
- Document Status Badge
- Extraction Strategy Select
- File Icon
- File Upload
- Indexing Progress
- Live Waveform
- Matrix
- Message
- Mic Selector
- Model Diff View
- Model Selector
- Model Type Filter
- Node Catalog
- Option Editor
- Orb
- Output Variables View
- Package Card
- Prompt Editor
- Provider Status Card
- Radio Card
- Resource Card
- Resource Sidebar
- Response
- Run Node List
- Scrub Bar
- Segment Card
- Shimmering Text
- Speech Input
- Token Trend Chart
- Tool Call Card
- Transcript Viewer
- Usage Stat Card
- Variable Binding Editor
- Variable Selector
- Voice Button
- Voice Picker
- Waveform
- Workflow Node Card
- Workspace Selector
QueuedIndexingReadyFailedPausedDisabled
import { DocumentStatusBadge } from "@/components/ui/document-status-badge"
export function DocumentStatusBadgeDemo() {
return (
<div className="flex w-full max-w-xl flex-wrap gap-2">
<DocumentStatusBadge status="queued" />
<DocumentStatusBadge status="indexing" />
<DocumentStatusBadge status="ready" />
<DocumentStatusBadge status="failed" />
<DocumentStatusBadge status="paused" />
<DocumentStatusBadge status="disabled" />
</div>
)
}
Installation
pnpm dlx shadcn@latest add https://ui.zgi.ai/r/document-status-badge.jsonpnpm dlx shadcn@latest add https://ui.zgi.ai/r/document-status-badge.json
yarn dlx shadcn@latest add https://ui.zgi.ai/r/document-status-badge.jsonComponent
"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
| Prop | Type | Default |
|---|---|---|
| status | DocumentStatus | required |
| label | ReactNode | status label |
| showIcon | boolean | true |
Deploy and Scale Agents with ZGI
ZGI delivers the infrastructure and developer experience you need to ship reliable audio & agent applications at scale.
Talk to an expert