Badge

Overview

<h1 class="env-text">Hello <span class="env-badge">New</span></h1>
<h2 class="env-text">Hello <span class="env-badge">New</span></h2>

Variants

<span class="env-badge">Primary</span>
<span class="env-badge env-badge--success">Success</span>
<span class="env-badge env-badge--warning">Warning</span>
<span class="env-badge env-badge--danger">Danger</span>
<span class="env-badge env-badge--info">Info</span>

Status variants

Available since 2023.02.1

<span class="env-badge env-badge--neutral">Neutral</span>
<span class="env-badge env-badge--active">Active</span>
<span class="env-badge env-badge--attention">Attention</span>

Brand

2023.01

Brand color badges are available by using modifier env-badge--brand or env-badge--brand-{n}.

Valid values for {n} are: 05, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80 , 85, 90, 95, 100.

Brand Brand 05 Brand 10 Brand 15 Brand 20 Brand 25 Brand 30 Brand 35 Brand 40 Brand 45 Brand 50 Brand 55 Brand 60 Brand 65 Brand 70 Brand 75 Brand 80 Brand 85 Brand 90 Brand 95 Brand 100

Status badge

2023.02.1

Indicates active/inactive status. May be used on text elements and also in combination with profile image.

<p class="env-status-badge">Last logged in 5 h</p>
<p class="env-status-badge env-status-badge--active">Logged in</p>