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/video-uploader-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
styles	StatusBadgeStyles	none	Slot map applied to internal elements (see Slots below)

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>

Slots

Pass a styles slot map to theme internal elements. Slots merge over defaults and per-status statusConfig colors; local style props win over slots. See Theming for the canonical merge-order explanation.

Slot	Targets
label	The pill element (text and container)

<StatusBadge
  status={file.status}
  styles={{
    label: { fontWeight: 600, letterSpacing: 0.5 },
  }}
/>