# EuiBadgeComponent

**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>
<h4>Basic badge</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-badge&gt;99&lt;/eui-badge&gt;</code></pre></div><h4>Badge with semantic variants</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-badge euiSuccess&gt;Active&lt;/eui-badge&gt;
&lt;eui-badge euiDanger&gt;Error&lt;/eui-badge&gt;</code></pre></div><h4>Badge with icon</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-icon-svg icon=&quot;eui-email&quot;&gt;
  &lt;eui-badge euiDanger euiSizeS&gt;9&lt;/eui-badge&gt;
&lt;/eui-icon-svg&gt;</code></pre></div><h4>Badge with button</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;button euiButton euiPrimary&gt;
  Primary
  &lt;span euiBadge&gt;99&lt;/span&gt;
&lt;/button&gt;</code></pre></div><h4>Badge with truncation</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-badge [maxCharCount]=&quot;2&quot; charReplacement=&quot;99+&quot;&gt;150&lt;/eui-badge&gt;</code></pre></div><h4>Icon-only badge (dot indicator)</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-badge [euiIconBadge]=&quot;true&quot; euiDanger&gt;&lt;/eui-badge&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Uses role=&quot;status&quot; for screen reader announcements</li>
<li>aria-label provides context (defaults to &quot;badge&quot;)</li>
<li>Content is automatically announced by screen readers</li>
<li>Truncated content shows replacement text to all users</li>
<li>Empty badges are visually indicated with special styling</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Size variants: euiSizeS, euiSizeM (default)</li>
<li>Color variants: euiPrimary, euiSecondary, euiSuccess, euiInfo, euiWarning, euiDanger</li>
<li>maxCharCount truncates content when exceeded, showing charReplacement (default: &quot;99+&quot;)</li>
<li>euiIconBadge creates a small dot indicator without text</li>
<li>euiDottedBadge applies dotted styling variant</li>
<li>Empty badges (no content) automatically receive special styling</li>
<li>colorPalette accepts custom color palette names for extended theming</li>
<li>euiOutline adds border outline styling</li>
<li>Can be used as element (eui-badge) or attribute (div[euiBadge], span[euiBadge])</li>
</ul>


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

**Standalone:** false

## Inputs

- **aria-label**: `string | null` - 
- **charReplacement**: `string` - <p>String to display when content is truncated due to maxCharCount.</p>

- **colorPalette**: `string` - <p>Extra color palette to be used on the badge.
Accepts custom color palette names for extended theming beyond standard variants.</p>

- **e2eAttr**: `string` - 
- **euiDottedBadge**: `boolean` - <p>Whether to display the badge with dotted styling variant.
Applies alternative visual treatment to the badge.</p>

- **euiIconBadge**: `boolean` - <p>Whether the badge contains only an icon (displays as a small dot indicator).
When true, no text content is shown, creating a minimal status indicator.</p>

- **maxCharCount**: `number` - <p>Maximum number of characters to display before truncating.
When content exceeds this limit, it will be replaced with charReplacement value.
Useful for displaying large numbers in a compact format (e.g., &quot;99+&quot; for values over 99).</p>

