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.