Label

Discriminator: label
Fluent UI Blazor Component: FluentLabel

Description

The Label component renders text content with configurable typography, font weight, color, and alignment. It is the primary component for displaying static text such as titles, descriptions, status messages, and informational content.

Properties

Property	Type	Required	Default	Description
`component`	`string`	✅ Yes	`"label"`	Type discriminator
`style`	`string`	No	`null`	Inline CSS style
`id`	`string`	No	`null`	Component identifier for data binding
`text`	`string`	No	`null`	The text content to display
`typography`	`Typography`	No	`Body`	Typography style (see values below)
`weight`	`FontWeight`	No	`Normal`	Font weight: `Normal`, `Bold`, `Bolder`
`color`	`Color`	No	`null`	Predefined color theme (see shared enumerations)
`customColor`	`string`	No	`null`	Custom CSS color value (e.g. `"#FF0000"`, `"rgb(255, 0, 0)"`)
`alignment`	`HorizontalAlignment`	No	`null`	Horizontal text alignment (see shared enumerations)
`marginBlock`	`string`	No	`null`	CSS `margin-block` value (e.g. `"0"`, `"10px 5px"`)
`disabled`	`bool`	No	`false`	Whether the label appears in a disabled/muted state

Typography Values

Value	Description
`Body`	Standard body text
`Subject`	Subject/subtitle text
`Header`	Header text
`PaneHeader`	Pane header text (larger)
`HeroTitle`	Hero/banner title (largest)
`PageTitle`	Page title
`H1` – `H6`	HTML heading levels 1 through 6

FontWeight Values

Value	Description
`Normal`	Normal font weight
`Bold`	Bold font weight
`Bolder`	Extra bold font weight

Data Binding

The Label component is a display-only component and does not provide data or validation.

JSON Example

Simple Label

Rendering...

Custom Colored Label

Rendering...

Disabled Label

Rendering...

Conigma Connect