Badge
A small pill of text: a status, a count, a label.
Neutral
Good
Warn
Bad
Info
Accent
<div class="flex flex-wrap items-center gap-2">
<%= badge "Neutral" %>
<%= badge "Good", tone: :good %>
<%= badge "Warn", tone: :warn %>
<%= badge "Bad", tone: :bad %>
<%= badge "Info", tone: :info %>
<%= badge "Accent", tone: :accent %>
</div>- Webhook to Slack Failing
- Nightly export Healthy
- Pull requests 12
<ul class="grid w-80 gap-3">
<li class="flex items-center justify-between gap-3">
<span>Webhook to Slack</span>
<%= badge "Failing", tone: :bad %>
</li>
<li class="flex items-center justify-between gap-3">
<span>Nightly export</span>
<%= badge "Healthy", tone: :good %>
</li>
<li class="flex items-center justify-between gap-3">
<span>Pull requests</span>
<%= badge "12" %>
</li>
</ul>