Divider

Horizontal

Vertical

A vertical rule takes the height of its flex row, whatever that row's height is: a fixed height, or the tallest cell as text wraps. Outside a flex row, give it a height of its own.

Labeled

A long label wraps between the two lines and breaks anywhere, so an identifier never widens its container; each line keeps a minimum length so the label stays flanked.

A rule has no width of its own: a horizontal one fills its container, so put it in a block, a card or a flex column. In a shrink-wrapped box with nothing else in it, it is as wide as that box's content.

Props

Accessibility

• Decorative by default (role="none"). Set decorative={false} for a separator with its orientation.
• A labeled rule hides its decorative lines from assistive technology. A decorative labeled rule leaves its label as plain text; a semantic one is named by its label (pass aria-label to name it otherwise).

Manifest entry

<Divider />

{
  "description": "Thin rule that separates content, with an optional centered uppercase label (horizontal only). A horizontal rule takes the width of its container and a vertical one the height of its flex row. A long label wraps between its two lines and breaks anywhere. A semantic labeled divider is named by its label.",
  "props": {
    "orientation": {
      "type": "enum",
      "values": [
        "horizontal",
        "vertical"
      ],
      "default": "horizontal",
      "description": "The direction of the rule. A vertical rule stretches to the height of its flex row, so put it in a flex row or give it a height."
    },
    "decorative": {
      "type": "boolean",
      "default": true
    },
    "label": {
      "type": "string"
    }
  },
  "composable_with": [
    "Card",
    "Sidebar"
  ],
  "example": "<Divider />"
}