Badge

A small status indicator component for displaying labels, counts, or status.

Basic Usage

Default Badge

Basic badge with default styling.

<ae-badge>New</ae-badge>

Variants

Badge Variants

Different color variants for various states.

<div class="demo-row">
<ae-badge>Default</ae-badge>
<ae-badge variant="primary">Primary</ae-badge>
<ae-badge variant="success">Success</ae-badge>
<ae-badge variant="warning">Warning</ae-badge>
<ae-badge variant="error">Error</ae-badge>
<ae-badge variant="info">Info</ae-badge>
</div>

Sizes

Badge Sizes

Small, medium, and large sizes.

<div class="demo-row">
<ae-badge size="sm">Small</ae-badge>
<ae-badge size="md">Medium</ae-badge>
<ae-badge size="lg">Large</ae-badge>
</div>

Use Cases

Common Use Cases

Status indicators, counts, and labels.

<div class="demo-row" style="gap: 2rem;">
<div style="display: flex; align-items: center; gap: 0.5rem;">
  <span>Status:</span>
  <ae-badge variant="success">Active</ae-badge>
</div>
<div style="display: flex; align-items: center; gap: 0.5rem;">
  <span>Messages</span>
  <ae-badge variant="primary">5</ae-badge>
</div>
<div style="display: flex; align-items: center; gap: 0.5rem;">
  <span>Version</span>
  <ae-badge>v2.0</ae-badge>
</div>
</div>

pnpm add @aetherui-kit/core

npm install @aetherui-kit/core

Import

import { defineAeBadge } from '@aetherui-kit/core/badge';
defineAeBadge();

Props

Name	Type	Default	Description
`variant`	`'default' \| 'primary' \| 'success' \| 'warning' \| 'error' \| 'info'`	`'default'`	Color variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size variant

Slots

Name	Description
default	Badge content

CSS Parts

Name	Description
`base`	The badge element