Badge

A one--line small inline label used to communicate status, counts, or categories.

Import

import { Badge } from '@mitek/ui';

Variants

DefaultPrimarySuccessWarningErrorInfo

<Badge variant="default">Default</Badge>
<Badge variant="primary">Primary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="error">Error</Badge>
<Badge variant="info">Info</Badge>

Sizes

SmallMediumLarge

<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>   {/* default */}
<Badge size="lg">Large</Badge>

With dot indicator

ActivePendingFailed

<Badge variant="success" dot>Active</Badge>
<Badge variant="warning" dot>Pending</Badge>
<Badge variant="error" dot>Failed</Badge>

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'primary' \| 'success' \| 'warning' \| 'error' \| 'info'`	`'default'`	Visual style
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size
`dot`	`boolean`	`false`	Show dot indicator
`className`	`string`	—	Additional CSS class

Button Switch