Tag Component

Sizes

Small Medium Large

<Tag Text="Small"  Size="sm" />
<Tag Text="Medium" Size="md" />
<Tag Text="Large"  Size="lg" />

With close button

Removable Removable Removable

<Tag Text="Removable" Size="md" ShowClose="true" />

With count

Design3 Development12 Marketing99

<Tag Text="Design" Size="md" ShowCount="true" Count="12" />

With dot

Active Active Active

<Tag Text="Active" Size="md" ShowDot="true" />

With avatar

Olivia Rhye

Phoenix Baker

Lana Steiner

<Tag Text="Olivia Rhye"
     Size="md"
     ShowAvatar="true"
     AvatarUrl="https://example.com/olivia.jpg" />

With checkbox

Design Development Marketing

<Tag Text="Design"      Size="md" ShowCheckbox="true" />
<Tag Text="Development" Size="md" ShowCheckbox="true" Checked="true" />

Combined variants

Olivia Rhye Design5 Active

Team8

<Tag Text="Olivia Rhye" Size="md"
     ShowAvatar="true" AvatarUrl="/olivia.jpg"
     ShowClose="true" />

<Tag Text="Design" Size="md"
     ShowDot="true"
     ShowCount="true" Count="5" />

<Tag Text="Active" Size="md"
     ShowCheckbox="true" Checked="true"
     ShowClose="true" />

Interactive (removable)

DesignDevelopmentMarketingProductEngineering

@foreach (var tag in tags)
{
    <Tag Text="@tag" Size="md" ShowClose="true"
         OnClose="() => RemoveTag(tag)" />
}

@code {
    private List<string> tags = ["Design", "Development", "Marketing"];
    private void RemoveTag(string tag) => tags.Remove(tag);
}