Tag

Tags help label and organize content in the interface. They highlight key attributes and make it easier for users to quickly understand what category or type of content they are seeing.

Overview

Tags are small, inline labels used to categorize content or communicate status.

Muted Neutral Success Brand Danger
razor
<FodStack Direction="StackDirection.Row" Gap="Spacing.Spacing8" Align="StackAlign.Center" style="flex-wrap:wrap;">
    <FodTag Content="Muted"    Color="TagColor.Muted"/>
    <FodTag Content="Neutral"  Color="TagColor.Neutral"/>
    <FodTag Content="Success"  Color="TagColor.Success"/>
    <FodTag Content="Brand"    Color="TagColor.Brand"/>
    <FodTag Content="Danger"   Color="TagColor.Danger"/>
</FodStack>

Styles

Complete reference of all color and variant combinations. Each tag variant (Subtle, Strong, Outlined) is shown for all 6 status colors, with and without a leading icon.

Icon-none

Label muted-subtle
Label muted-strong
Label muted-outlined
Label neutral-subtle
Label neutral-strong
Label neutral-outlined
Label accent-subtle
Label accent-strong
Label accent-outlined
Label success-subtle
Label success-strong
Label success-outlined
Label brand-subtle
Label brand-strong
Label brand-outlined
Label danger-subtle
Label danger-strong
Label danger-outlined

Icon-leading

Label muted-subtle
Label muted-strong
Label muted-outlined
Label neutral-subtle
Label neutral-strong
Label neutral-outlined
Label accent-subtle
Label accent-strong
Label accent-outlined
Label success-subtle
Label success-strong
Label success-outlined
Label brand-subtle
Label brand-strong
Label brand-outlined
Label danger-subtle
Label danger-strong
Label danger-outlined
razor
<FodTag Color="TagColor.Muted"    Variant="TagVariant.Subtle">Label</FodTag>
<FodTag Color="TagColor.Muted"    Variant="TagVariant.Strong">Label</FodTag>
<FodTag Color="TagColor.Muted"    Variant="TagVariant.Outlined">Label</FodTag>
<FodTag Color="TagColor.Neutral"  Variant="TagVariant.Subtle">Label</FodTag>
<FodTag Color="TagColor.Success"  Variant="TagVariant.Strong">Label</FodTag>
<FodTag Color="TagColor.Danger"   Variant="TagVariant.Outlined">Label</FodTag>

<FodTag Color="TagColor.Muted"    Variant="TagVariant.Subtle"   Icon="CheckmarkSmall">Label</FodTag>
<FodTag Color="TagColor.Success"  Variant="TagVariant.Strong"   Icon="CheckmarkSmall">Label</FodTag>
<FodTag Color="TagColor.Danger"   Variant="TagVariant.Outlined" Icon="CircleError">Label</FodTag>

Sizes

Two sizes supported: Medium (24px, default) and Small (20px).

Medium
Small
razor
<FodTag Content="Medium" Color="TagColor.Neutral" Size="Size.Medium"/>
<FodTag Content="Small"  Color="TagColor.Neutral" Size="Size.Small"/>

API Reference

Complete FodTag parameter reference.

No properties defined.

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please reload the page.