Divider

Discriminator: divider
Fluent UI Blazor Component: FluentDivider

Description

The Divider component renders a visual separator line between other components. It can be oriented horizontally or vertically, making it useful for separating sections within stacks and cards.


Properties

Property

Type

Required

Default

Description

component

string

✅ Yes

"divider"

Type discriminator

style

string

No

null

Inline CSS style

id

string

No

null

Component identifier

orientation

Orientation

No

Horizontal

Orientation of the divider: Horizontal or Vertical


Rendering Behavior

  • When orientation is Horizontal, the divider automatically stretches to width: 100%.

  • When orientation is Vertical, the divider automatically stretches to height: 100%.

  • Custom styles can override this default sizing behavior.


Data Binding

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


JSON Example

Horizontal Divider (Default)

Rendering...

Vertical Divider

Rendering...

Divider Between Content

Rendering...

See Also