Badge

Badge component is a text badge that is displayed in other components and represents a status or a notification. This component can also contain medium size icon.

New
New

Themes

Primary
New
Success
New
Warning

Circle Small Warning style badge is displayed on the top right corner of an element and representing Notifications/Warnings count.

New
Amplified
New
Muted
New
Expose
New

Specifications

$badge-border-radius:           radius(round);
$badge-background-color:        palette(cg9);
$badge-vertical-padding:        unit(1);
$badge-horizontal-padding:      unit(2);

// Text

$badge-text-type:               'caption';
$badge-text-theme:              'inverse';

// Themes

$badge-shadow-default:          $box-shadow-default;
$badge-theme-primary-color:     palette(cp1);
$badge-theme-success-color:     palette(cs1);
$badge-theme-warning-color:     palette(cs3);
$badge-theme-amplified-color:   palette(cg1);
$badge-theme-muted-color:       palette(cg4);
$badge-theme-expose-color:      palette(cs2);

API

name type default
theme default / primary / success / warning / amplified / muted / expose default
body string -
icon string -