Badge

GumDrops

The badge component, prefixed by gds-badge, is a numerical indicator of associated items.

Demo

Default badge2

Inverse badge2

Warning badge2

Danger badge2

Empty default badge

Empty info badge

Empty warning badge

Empty danger badge

    <div>
      <p>Default badge<span className="gds-badge">2</span></p>
      <p>Inverse badge<span className="gds-badge gds-badge--inverse">2</span></p>
      <p>Warning badge<span className="gds-badge gds-badge--warning">2</span></p>
      <p>Danger badge<span className="gds-badge gds-badge--danger">2</span></p>
      <p>Empty default badge<span className="gds-badge gds-badge--empty"></span></p>
      <p>Empty info badge<span className="gds-badge gds-badge--info gds-badge--empty"></span></p>
      <p>Empty warning badge<span className="gds-badge gds-badge--warning gds-badge--empty"></span></p>
      <p>Empty danger badge<span className="gds-badge gds-badge--danger gds-badge--empty"></span></p>
    </div>


    <div>
      <p>Default badge<span className="gds-badge">2</span></p>
      <p>Inverse badge<span className="gds-badge gds-badge--inverse">2</span></p>
      <p>Warning badge<span className="gds-badge gds-badge--warning">2</span></p>
      <p>Danger badge<span className="gds-badge gds-badge--danger">2</span></p>
      <p>Empty default badge<span className="gds-badge gds-badge--empty"></span></p>
      <p>Empty info badge<span className="gds-badge gds-badge--info gds-badge--empty"></span></p>
      <p>Empty warning badge<span className="gds-badge gds-badge--warning gds-badge--empty"></span></p>
      <p>Empty danger badge<span className="gds-badge gds-badge--danger gds-badge--empty"></span></p>
    </div>

Error Log

Context (Color)

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

gds-badge--empty