StatusBadge

StatusBadge renders a colored pill label for a FileStatus. Override colors and labels per status with statusConfig, or drop into headless mode with the children render function.

SelectedValidatingUploadingProcessingReadyFailed

import { StatusBadge } from "@hyperserve/upload-react";

<StatusBadge status={file.status} />

Props

Prop	Type	Default	Description
status	FileStatus	required	The file status
statusConfig	Partial<Record<FileStatus, StatusConfigEntry>>	none	Per-status overrides for colors/labels
getLabel	(status: FileStatus) => string	none	Custom label function
children	(info) => ReactNode	none	Headless render function
style	CSSProperties	none	Container styles
className	string	none	Container class

Customization

Override colors and labels per status:

QueuedIn ProgressEncodingPublishedFailed

const statusConfig = {
  selected: { bg: "#fef9c3", text: "#713f12", label: "Queued" },
  uploading: { bg: "#dbeafe", text: "#1e40af", label: "In Progress" },
  processing: { bg: "#ede9fe", text: "#5b21b6", label: "Encoding" },
  ready: { bg: "#d1fae5", text: "#065f46", label: "Published" },
  failed: { bg: "#fee2e2", text: "#991b1b", label: "Failed" },
};

<StatusBadge status="selected" statusConfig={statusConfig} />
<StatusBadge status="uploading" statusConfig={statusConfig} />
<StatusBadge status="processing" statusConfig={statusConfig} />
<StatusBadge status="ready" statusConfig={statusConfig} />
<StatusBadge status="failed" statusConfig={statusConfig} />

Headless mode

Use the children render function for complete control:

SelectedUploadingProcessingReadyFailed

<StatusBadge status={file.status}>
  {({ label, color }) => (
    <span style={{ color, fontWeight: 600 }}>{label}</span>
  )}
</StatusBadge>