Logo

AueraUI

Docs

Components

Components

Badge

A small label used to highlight information, indicate status, or display counts.

Logo
Badge

Solid Variants

Solid badges have a filled background and are great for indicating strong emphasis. Use them for primary labels, status indicators, or categories.

BadgeBadgeBadgeBadgeBadgeBadgeBadgeBadge

Outline Variants

Outline badges have a transparent background with a colored border. They are useful for subtle indications, tags, or less prominent labels.

BadgeBadgeBadgeBadgeBadgeBadgeBadgeBadge

Soft Variants

Soft badges feature a light background with soft colors, making them perfect for non-intrusive labels, such as filtering options or additional metadata.

BadgeBadgeBadgeBadgeBadgeBadgeBadgeBadge

With Status Badge

Status badges include small indicators like dots to signify availability, activity, or alerts. Ideal for chat apps, dashboards, and user lists.

Badge

Notifications & Counts

These badges display numeric indicators for notifications, messages, or updates.

API Reference

variant

Type:

"solid" | "soft" | "outline"

Defines the badge's visual style. 'Solid' has a filled background, 'Soft' has a subtle tone, and 'Outline' has a bordered style.

Default:

solid
colorScheme

Type:

"blue" | "red" | "yellow" | "green" | "neutral" | "thick" | "teal" | "gray"

Specifies the color theme of the badge. Choose from predefined colors like blue, red, yellow, etc.

Default:

blue
className

Type:

string

Allows custom styling by passing additional Tailwind CSS classes.

Default:

asDiv

Type:

boolean

If true, renders the badge as a <div> instead of a <span>, which is useful for layout flexibility.

Default:

false
mode

Type:

"light" | "dark"

Determines the color mode. 'Light' uses a light theme, 'Dark' uses a dark theme, and 'System' adapts to user preferences.

Default:

System