Separator

On its own, a separator draws the theme's hairline across the full width of its container. Anything given as its content - a run of text, an icon, any markup - is flanked by the two segments of the line rather than laid over it, so the label reads on any surface underneath, and it also names the separator to assistive technologies.

Vertical stands the line up between items laid out side by side. Inside a flex row it stretches to the height of the row on its own, so nothing needs measuring; anywhere else it takes its height from its container, which then needs a height of its own.

AlignContent puts the content at the start, the middle or the end of the line, by sharing the line between the segment before it and the one after it. The alignment is direction-aware on a horizontal separator - start and end follow the reading direction - and on a vertical one it means the top, the middle or the bottom.

ContentOffset pushes the content away from the edge of the line it is aligned to, as any CSS length. It is the length of the short segment before the content, so a percentage measures against the length of the separator whichever way it runs. It only means anything while AlignContent is Start or End, since centered content has no edge to be offset from, and it is direction-aware: in RTL, a start-aligned offset pushes from the right.

A horizontal separator is as wide as its container and a vertical one stretches to the height of the flex row it stands in. AutoSize gives that up and sizes the separator to its content instead, which is what a separator that should follow its flex container's align-items wants. A vertical separator that gives up its stretch is then only as tall as its own content, so an auto-sized one usually wants a container that stretches it.

Inset holds the separator off both ends of its container by any CSS length. An inset rule is what separates the rows of a list without cutting across the gutter the rows are indented by - the divider under an avatar row starts where the text does. It shortens a horizontal separator at both ends and a vertical one at the top and the bottom. It is padding, so a percentage measures against the width of the container either way, which is what CSS does with every percentage padding - a vertical separator wants a length.

Thickness sets the weight of the line, as any CSS length. Leaving it unset keeps the hairline the theme draws every divider at; a heavier rule marks a stronger break in the content, and it is what gives a dotted or a double line the room its pattern needs.

LineStyle draws the line solid, dashed, dotted or double. The default is solid; a dashed or a dotted rule reads as a softer break than a solid one, while a double rule reads as a stronger one. Both the dots and the gap of a double line need room, so those two want a Thickness heavier than a hairline.

A separator reports itself to assistive technologies with the separator role, so a screen reader announces the boundary between groups. A page can also carry many rules that mean nothing - each announced as "separator" is noise - and Decorative removes such a separator from the accessibility tree while keeping its looks. The two below are visually identical; only what a screen reader hears differs.

Color paints the line in one of the theme's roles rather than in a literal color, so every preset and both schemes re-skin it. Border instead picks between the neutral border tiers of the theme, and loses to Color where both are set. Background paints the patch the content sits on: the line is drawn either side of the content rather than behind it, so this is for content that should read as a chip of its own, and it is transparent by default.

Size steps the weight of the line through the theme's sizes, where Thickness sets a length of its own and wins over it. Small is the hairline every divider of the theme is drawn at, and each step up multiplies it - so a preset that thins its hairline thins the whole scale with it.

Style and Class reach the root element - a max-width with an auto margin, for one, shortens the line the way a length prop would - and Styles and Classes reach each part of the component by name: the Root and the Content the label renders in. The line itself is the two pseudo elements of the root - the segment before the content and the one after it - which the classed example below restyles into one gradient running the length of the separator.

Dir renders the separator in a right-to-left direction, and with it the meaning of start and end flips: content aligned to the start of the line sits on the right. The direction is also cascaded, so a separator inside an RTL container inherits it.