# Badge

> AstrolBadge: Blazor status labels (active, pending, blocked...) colored by meaning, with an icon or a dot, and an outline variant.

Source page: https://doc.astrolui.com/basic-component/badge

Short status labels or counters.

## 1. Demo AstrolBadge

The color comes from **Status** (the same **AstrolStatus** as **AstrolAlert**); **Brand** uses the theme color. Use them in tables, cards or next to a title.

```razor
@using Astrol.Component.Basic.Badge

@foreach (var status in Enum.GetValues<AstrolStatus>())
{
    <AstrolBadge Status="status" Text="@status.ToString()" />
}

<AstrolBadge Status="AstrolStatus.Success" Dot="true" Text="Active" />
<AstrolBadge Status="AstrolStatus.Warning" Dot="true" Text="Pending" />
<AstrolBadge Status="AstrolStatus.Danger" Icon="astrol-cancel" Text="Blocked" Outline="true" />
<AstrolBadge Status="AstrolStatus.Brand" Icon="astrol-star" Text="Pro" />
<AstrolBadge Text="12" Title="Unread messages" />
```

### Supported parameters

- Text **(string)** or ChildContent **(RenderFragment)**, the text.
- Status **(AstrolStatus)**, **Neutral** (default), **Brand**, **Info**, **Success**, **Warning** or **Danger**.
- Icon **(string)**, icon before the text; Dot **(bool)**, a colored dot instead.
- Outline **(bool)**, border only, no background (default **false**).
- Title **(string)**, text on hover; Class **(string)**.