Components

Horizontal Rule

Dividers that separate sections of content

`HorizontalRule` line styles

Basic

<HorizontalRule />

Dotted

<HorizontalRule lineStyle="dotted" />

Dashed

<HorizontalRule lineStyle="dashed" />

Emphasis

The emphasis prop controls how prominent the line is against the surface behind it. Use default for dividers that structure a page and subtle for lighter separators inside a card or list.

<>
  <HorizontalRule emphasis="default" />
  <HorizontalRule emphasis="subtle" />
</>

The color prop is deprecated in favor of emphasis. Existing call sites render unchanged: gray resolves to default and gray-300 resolves to subtle.

Props

HorizontalRule

lineStyle
Controls the style of the line rendered for the horizontal rule.

Type
'solid' | 'dotted' | 'dashed'
Default
'solid'
emphasis
Controls how prominent the line is against the surface behind it.

Type
'default' | 'subtle'
color
deprecated
Controls the color of the line rendered for the horizontal rule.

Note:
Use emphasis instead. gray maps to default and gray-300 maps to subtle. Ignored when emphasis is set.

Type
'gray' | 'gray-300'