Basic Label

Default Label Primary Secondary Warning Severe Open Closed
<PrimerLabel>Default Label</PrimerLabel>
<PrimerLabel Color="LabelColor.Primary">Primary</PrimerLabel>
<PrimerLabel Color="LabelColor.Secondary">Secondary</PrimerLabel>
<PrimerLabel Color="LabelColor.Warning">Warning</PrimerLabel>
<PrimerLabel Color="LabelColor.Severe">Severe</PrimerLabel>
<PrimerLabel Color="LabelColor.Open">Open</PrimerLabel>
<PrimerLabel Color="LabelColor.Closed">Closed</PrimerLabel>

Label Variants

Success State Failure State Warning Message
<PrimerLabel Color="LabelColor.Success">Success State</PrimerLabel>
<PrimerLabel Variant="LabelVariant.Outline" Color="LabelColor.Danger">Failure State</PrimerLabel>
<PrimerLabel Variant="LabelVariant.Subtle" Color="LabelColor.Accent">Warning Message</PrimerLabel>

Label with Icon

Error Occurred Saved Information Pending
<PrimerLabel Icon="IconName.Alert16" Color="LabelColor.Danger" AriaLabelName="Error Label">Error Occurred</PrimerLabel>
<PrimerLabel Icon="IconName.Check16" Color="LabelColor.Attention" AriaLabelName="Success Label">Saved</PrimerLabel>
<PrimerLabel Icon="IconName.Info16" Variant="LabelVariant.Outline" Color="LabelColor.Default">Information</PrimerLabel>
<PrimerLabel Icon="IconName.Clock16" Variant="LabelVariant.Subtle" Color="LabelColor.Default">Pending</PrimerLabel>

Emoji + Icon Combination

Deployed 🚀 🔥 Critical Error
<PrimerLabel Emoji="🚀"
                Icon="IconName.Rocket16"
                Variant="LabelVariant.Outline"
                Color="LabelColor.Accent"
                AriaLabelName="Deployment Label"
                IconPosition="LabelIconPosition.Right">
    Deployed
</PrimerLabel>

<PrimerLabel Emoji="🔥"
                Size="LabelSize.Large"
                Color="LabelColor.Danger">
    Critical Error
</PrimerLabel>

Label Options

Available options for PrimerLabel component

NameDescriptionDefault Value
Color
Label color (Primary, Secondary, Warning, etc.)
Default
Variant
Label style variant (Default, Outline, Subtle)
Default
Size
Label size (Medium, Large)
Medium
Icon
Optional leading icon
-
Emoji
Optional emoji
-
IconPosition
Icon position (Left, Right)
Left
AriaLabelName
Accessible label name for screen readers
-