# EuiStatusBadgeComponent

**Type:** component

<p>A badge component that can display text, numbers, or icons with various states and styles.
Supports content truncation, empty states, and icon-only modes.</p>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;!-- Status badge with semantic colors --&gt;
&lt;span euiStatusBadge euiSuccess&gt;Active&lt;/span&gt;
&lt;span euiStatusBadge euiWarning&gt;Pending&lt;/span&gt;
&lt;span euiStatusBadge euiDanger&gt;Error&lt;/span&gt;

&lt;!-- Dotted badge --&gt;
&lt;span euiStatusBadge euiInfo [euiDottedBadge]=&quot;true&quot;&gt;New&lt;/span&gt;

&lt;!-- Custom color palette --&gt;
&lt;span euiStatusBadge [colorPalette]=&quot;&#39;custom-color&#39;&quot;&gt;Custom&lt;/span&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Badge has role=&quot;status&quot; for screen readers</li>
<li>Provide meaningful aria-label describing the status</li>
<li>Ensure sufficient color contrast for text visibility</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Use semantic color variants (euiSuccess, euiWarning, euiDanger, euiInfo) for consistent meaning</li>
<li>Size variants (euiSizeS, euiSizeM) control badge dimensions</li>
<li>Dotted badge mode displays a small dot indicator instead of full badge</li>
</ul>


**Selector:** `div[euiStatusBadge], span[euiStatusBadge], eui-status-badge`

**Standalone:** false

## Inputs

- **aria-label**: `string | null` - 
- **colorPalette**: `string` - <p>Extra color palette to be used on the status-badge.</p>

- **e2eAttr**: `string` - 
- **euiDottedBadge**: `boolean` - 
