SwashDocs

Badge

Display a count indicator.

Colors

Use color property to precise the nature of the information displayed in the badge.

primary
20
danger
20
success
20
secondary
20
import { Badge } from 'swash/Badge';

() => (
  <Badge color="danger">
    20
  </Badge>
);

Scales

Use scale property to change the size of the badge.

sm
20
md
20
import { Badge } from 'swash/Badge';

() => (
  <Badge scale="sm">
    20
  </Badge>
);