Label Component
Sizes
xs, sm, md, lg, xl
Extra Small (xs)
Small (sm)
Medium (md)
Large (lg)
Extra Large (xl)
razor
<Label Text="Extra Small" Size="xs" Color="primary" />
<Label Text="Small" Size="sm" Color="primary" />
<Label Text="Medium" Size="md" Color="primary" />
<Label Text="Large" Size="lg" Color="primary" />
<Label Text="Extra Large" Size="xl" Color="primary" />Weights
regular, medium, semibold, bold
Regular (400)
Medium (500)
Semibold (600)
Bold (700)
razor
<Label Text="Regular" Weight="regular" />
<Label Text="Medium" Weight="medium" />
<Label Text="Semibold" Weight="semibold" />
<Label Text="Bold" Weight="bold" />Colors
All tone options
Primary
Secondary
Tertiary
Brand
Error
Warning
Success
razor
@* Colors: primary, secondary, tertiary, quaternary,
brand, error, warning, success, white *@
<Label Text="Primary" Color="primary" />
<Label Text="Brand" Color="brand" />
<Label Text="Success" Color="success" />
<Label Text="Error" Color="error" />Style modifiers
Uppercase, italic, strikethrough, underline
Uppercase Overline
Italic Label
Strikethrough
Underline
razor
<Label Text="Uppercase" Uppercase="true" />
<Label Text="Italic" Italic="true" />
<Label Text="Strikethrough" Strikethrough="true" />
<Label Text="Underline" Underline="true" />Required & optional
Form field markers
Email address
Phone number(optional)
razor
<Label Text="Email address" Size="sm" Weight="medium" Required="true" />
<Label Text="Phone number" Size="sm" Weight="medium" Optional="true" />With icons
Leading and trailing icon slots
User name
Download report
razor
<Label Text="User name" Size="sm">
<LeadingIcon><svg>...user icon...</svg></LeadingIcon>
</Label>
<Label Text="Settings" Size="sm">
<TrailingIcon><svg>...gear icon...</svg></TrailingIcon>
</Label>Semantic elements
Choose the underlying HTML element
span (default)
Paragraph label
razor
@* Element values: span (default), label, p *@
<Label Text="span (default)" Element="span" />
<Label Text="Form label" Element="label" />
<Label Text="Paragraph label" Element="p" />Real-world patterns
Form field + key/value + section overline
Status
Active
Role
Administrator
Account Settings
Manage your preferences
razor
@* Form field label *@
<Label Text="Full name" Size="sm" Weight="medium" Element="label" Required="true" />
<InputField Placeholder="Enter your full name" />
@* Key-value display *@
<Label Text="Status" Color="tertiary" />
<Label Text="Active" Color="success" Weight="semibold" />
@* Section overline *@
<Label Text="Account Settings" Size="xs" Weight="semibold" Color="brand" Uppercase="true" />
<h2>Manage your preferences</h2>