Badge

Badges are lightweight UI elements used to display status, labels, counters, and semantic states.

Ignix Lite badges are built using native HTML elements and semantic attributes for accessibility and simplicity.

---

Intent Variants

Preview

SuccessErrorWarningNeutral

Code

<mark data-intent="success">
  Success
</mark>

<mark data-intent="danger">
  Error
</mark>

<mark data-intent="warning">
  Warning
</mark>

<mark data-intent="neutral">
  Neutral
</mark>

---

Status Badge

Preview

Active

Code

<span
  role="status"
  data-intent="success"
>
  Active
</span>

---

Long Text Badge

Preview

Very Long Badge Text

Code

<mark data-intent="warning">
  Very Long Badge Text
</mark>

Usage

Preview

Live

Pending

Failed

Code

<span
  role="status"
  data-intent="success"
>
  Live
</span>

<span
  role="status"
  data-intent="warning"
>
  Pending
</span>

<span
  role="status"
  data-intent="danger"
>
  Failed
</span>

---

Attributes

Attribute	Type	Description
data-intent	'success' | 'danger' | 'warning' | 'neutral'	Applies semantic badge styles
role="status"	string	Announces live status information for accessibility
(text content)	—	Label displayed inside the badge