Components / Data display
StatusBadge
Table-friendly status badge with icons.
Preview
active
1import { StatusBadge } from "@/components/ui/status-badge"2
3export function StatusBadgeDemo() {4 return <StatusBadge variant="active">active</StatusBadge>5}pending
The pending style of this component.
pending
1import { StatusBadge } from "@/components/ui/status-badge"2
3export function StatusBadgeDemo() {4 return <StatusBadge variant="pending">active</StatusBadge>5}warning
The warning style of this component.
warning
1import { StatusBadge } from "@/components/ui/status-badge"2
3export function StatusBadgeDemo() {4 return <StatusBadge variant="warning">active</StatusBadge>5}error
The error style of this component.
error
1import { StatusBadge } from "@/components/ui/status-badge"2
3export function StatusBadgeDemo() {4 return <StatusBadge variant="error">active</StatusBadge>5}inactive
The inactive style of this component.
inactive
1import { StatusBadge } from "@/components/ui/status-badge"2
3export function StatusBadgeDemo() {4 return <StatusBadge variant="inactive">active</StatusBadge>5}Installation
Add the source directly to your project with the shadcn CLI.
npx shadcn@latest add qentrah/DUI/status-badgeUsage
Install the component, import it from your configured UI directory, and adapt the source to your product. Open the source panel under any example to copy that exact variant.