BrandUI Label - PrimerBlazor

Basic Label Sizes

Small Medium Large

<PrimerStack Direction="StackDirection.Row" Gap="StackGap.Gap12">
    <PrimerBrandLabel Size="BrandLabelSize.Small">Small</PrimerBrandLabel>
    <PrimerBrandLabel Size="BrandLabelSize.Medium">Medium</PrimerBrandLabel>
    <PrimerBrandLabel Size="BrandLabelSize.Large">Large</PrimerBrandLabel>
</PrimerStack>

Label Colors & Gradient

Blue Red Green blue Pink blue Orange

<PrimerStack Direction="StackDirection.Row" Gap="StackGap.Gap12">
    <PrimerBrandLabel Color="BrandLabelColor.Blue">Blue</PrimerBrandLabel>
    <PrimerBrandLabel Color="BrandLabelColor.Red">Red</PrimerBrandLabel>
    <PrimerBrandLabel Color="BrandLabelColor.GreenBlue" UseGradient="true">Green blue</PrimerBrandLabel>
    <PrimerBrandLabel Color="BrandLabelColor.PinkBlue" UseGradient="true">Pink blue</PrimerBrandLabel>
    <PrimerBrandLabel Color="BrandLabelColor.Orange">Orange</PrimerBrandLabel>
</PrimerStack>

Label with Icon

Starred Copilot

<PrimerStack Direction="StackDirection.Row" Gap="StackGap.Gap12">
    <PrimerBrandLabel Color="BrandLabelColor.Yellow">
        <LeadingVisual>
            <PrimerBrandIcon Icon="BrandIconName.Star16" Size="BrandIconSize.Xsmall" />
        </LeadingVisual>
        <ChildContent>Starred</ChildContent>
    </PrimerBrandLabel>

    <PrimerBrandLabel Color="BrandLabelColor.BluePurple" UseGradient="true">
        <LeadingVisual>
            <PrimerBrandIcon Icon="BrandIconName.Copilot16" Size="BrandIconSize.Xsmall" />
        </LeadingVisual>
        <ChildContent>Copilot</ChildContent>
    </PrimerBrandLabel>
</PrimerStack>

Label Component Options

Available options for PrimerBrandLabel

Name	Description	Default Value	CSS Class
ChildContent	Label text content	null	Label__text
LeadingVisual	Optional leading icon or element	null	Label__leading-visual
Size	Label size (Small, Medium, Large)	Medium	Label--size-{size}
Color	Color variant of the label	Default	Label--color-{color}
UseGradient	Enable gradient background	false	Label--gradient