Layout component

Divider

Separate related horizontal or vertical content with optional labels, sizes, and semantic colors.

6 props0 slots0 outputsTheme readyResponsive

Interactive playground

Configure Divider

Change any prop and inspect the server-rendered component immediately.

Live preview

Divider

Component code

<Divider
  label="Divider"
/>

Live examples

Compare configurations and resize the browser to check responsive behavior.

Recommended

Separate related content without introducing another container.

Live preview

Related information

Component usage.wrn

<Divider
  label="Related information"
/>

Compact

Use a quiet rule between compact content groups.

Live preview

Component usage.wrn

<Divider
  size="sm"
  variant="secondary"
/>

Advanced

Separate groups of inline actions in toolbars and navigation.

Live preview

Actions

Component usage.wrn

<Divider
  size="lg"
  color="info"
  label="Actions"
  orientation="vertical"
  variant="success"
/>

Component API

All content and behavior shown above is supplied through these props and slots.

Prop	Type	Default	Required
`size`	string	`"default"`	No
`color`	string	`"primary"`	No
`label`	string	`""`	No
`orientation`	string	`"horizontal"`	No
`variant`	string	`"solid"`	No
`class`	string	`""`	No