ComponentsData display
Divider
MudDivider draws a thin rule between groups of content, horizontally or vertically. Use it when spacing alone does not separate the groups clearly.
Full width, inset and middle
DividerType controls where the rule starts and ends. Inset lines up with text after a leading avatar or icon; Middle leaves margin on both sides.
Central Station
Platform 4 · 18:42FullWidthRiverside
18:49 · step-freeInsetOld Market
18:55MiddleHarbour Point
19:03 · terminusVertical dividers in a row
Vertical dividers separate items in a toolbar or a row of facts. FlexItem makes the rule as tall as the row; without it the rule has no height in a flex container.
Vertical with FlexItem
14.2 km
11
21 min
In a toolbar of actions
Vertical without FlexItem: the rule collapses
Arrivals
Departures
Regular and light
Light uses the lighter divider color from the palette, for separators inside an already outlined surface.
Default
Sourdough starter fed
Dough rested overnight
Oven preheated to 250 °C
Light="true"
Sourdough starter fed
Dough rested overnight
Oven preheated to 250 °C
A sectioned receipt
Dividers in context: an order summary from a bakery, where rules separate the items, the totals and the footer.
Crumb & Crust Bakery
Order 2048 · Saturday 09:12
1 × Rye sourdough
4.60
3 × Cardamom bun
7.20
2 × Seeded baguette
4.20
Subtotal
16.00
Loyalty card
−1.00
Total (EUR)
15.00
Thank you. Bread baked before 7:00 every morning.
Playground
Change any parameter; the markup below updates with only the values that differ from the defaults.
Arrivals
Departures
<MudDivider DividerType="DividerType.Inset" FlexItem="true" />