Badge
The badge component, prefixed by gds-badge, is a numerical indicator of associated items.
Standard Badge
Default badge2
Inverse badge2
Warning badge2
Danger badge2
<p>Default badge<span class="gds-badge">2</span></p>
<p>Inverse badge<span class="gds-badge gds-badge--inverse">2</span></p>
<p>Warning badge<span class="gds-badge gds-badge--warning">2</span></p>
<p>Danger badge<span class="gds-badge gds-badge--danger">2</span></p>
Optional classes:
gds-badge--inverse
gds-badge--success
gds-badge--success-inverse
gds-badge--info
gds-badge--info-inverse
gds-badge--warning
gds-badge--warning-inverse
gds-badge--danger
gds-badge--danger-inverse
Empty Badge
For a simple colored circle without a number inside, use an empty badge.
Empty default badge
Empty info badge
Empty warning badge
Empty danger badge
<p>Empty default badge<span class="gds-badge gds-badge--empty"></span></p>
<p>Empty info badge<span class="gds-badge gds-badge--info gds-badge--empty"></span></p>
<p>Empty warning badge<span class="gds-badge gds-badge--warning gds-badge--empty"></span></p>
<p>Empty danger badge<span class="gds-badge gds-badge--danger gds-badge--empty"></span></p>