Badge

Status and count badges. Filled and outline variants.

DefaultSuccessErrorWarningInfoNeutralSuccess outlineError outlineWarning outlineInfo outlineNeutral outline

How to use

Import Badge and use with optional variant. Copy the examples below.

1. Import

tsx
import { Badge } from "@/app/components/ui";

2. Variants

tsx
<Badge>Default</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="error">Error</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="info">Info</Badge>
<Badge variant="success-outline">Success outline</Badge>