Badge

The Badge component displays small status indicators or labels with various styles and sizes.

Import

import { Badge } from "amvasdev-ui";

Examples

Basic Usage

Default

<Badge>Default</Badge>

Variants

PrimarySuccessWarningError

<Badge variant="primary">Primary</Badge>
  <Badge variant="success">Success</Badge>
  <Badge variant="warning">Warning</Badge>
  <Badge variant="error">Error</Badge>

Sizes

Extra SmallSmallMediumLargeExtra Large

<Badge size="xs">Extra Small</Badge>
  <Badge size="sm">Small</Badge>
  <Badge size="md">Medium</Badge>
  <Badge size="lg">Large</Badge>
  <Badge size="xl">Extra Large</Badge>

Border Types

OutlinedDashedNo Border

<Badge borderType="outline" variant="primary">Outlined</Badge>
  <Badge borderType="dash" variant="secondary">Dashed</Badge>
  <Badge borderType="none">No Border</Badge>

Soft Style

Soft SuccessSoft Warning

<Badge variant="success" soft>Soft Success</Badge>
  <Badge variant="warning" soft>Soft Warning</Badge>

Available Variants

neutralprimarysecondaryaccentinfosuccesswarningerror

Available Sizes

xssmmdlgxl

Notes

Available border types: none, outline, dash