Badge

Small colour-coded label for indicating status, category, or count.

Preview · Badge

Code

HTML · @primus/ui-core

<div class="hstack" style="flex-wrap:wrap">
  <span class="badge">Default</span>
  <span class="badge secondary">Secondary</span>
  <span class="badge outline">Outline</span>
  <span class="badge success">Active</span>
  <span class="badge warning">Pending</span>
  <span class="badge danger">Overdue</span>
  <span class="badge accent">Beta</span>
</div>

React

import { Badge } from 'primus-react-ui';

<Badge variant="default">Default</Badge>
<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="error">Overdue</Badge>
<Badge size="sm">Small</Badge>
<Badge size="lg">Large</Badge>

Angular

<primus-badge variant="default">Default</primus-badge>
<primus-badge variant="success">Active</primus-badge>
<primus-badge variant="warning">Pending</primus-badge>
<primus-badge variant="error">Overdue</primus-badge>

Props

Prop	Type	Default	Description
variant	default | success | warning | error | info	default	Visual style
size	sm | md | lg	md	Size

Version history

See the Changelog for version history and breaking changes.