Skip to main content
Elastic UI
Elastic UI
Getting startedComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Overview
  • Layout
    • Flex
    • Header
    • Horizontal rule
    • Page components
    • Page header
    • Spacer
  • Containers
  • Navigation
  • Display
  • Forms
  • Tabular content
  • Templates
  • Editors and syntax
  • EUI
  • Layout
  • Horizontal rule

Horizontal rule

EuiHorizontalRule is a styled

<hr> element. It can be one of three provided sizes (lengths), by default it will be full.

Loading...

Margins

The spacing added before and after EuiHorizontalRule can be adjusted using the margin prop. Don’t forget that margins will collapse against items that proceed and/or follow.

Loading...

Props

EuiHorizontalRule

Extends HTMLAttributes
π˜‚π˜‚
βœ„π˜—βœ„π˜—
Prop
↦
Description and type
↦
Default value
↡
Prop
size#
↦
Description and type

Defines the width of the HR.

Type: "full" | "half" | "quarter"
↦
Default value
full
↡
Prop
margin#
↦
Description and type
Type: "xs" | "s" | "m" | "l" | "xl" | "xxl" | "none"
↦
Default value
l
↡
Prop
className#
↦
Description and type
Type: string
↦
Default value
↡
Prop
aria-label#
↦
Description and type
Type: string
↦
Default value
↡
Prop
data-test-subj#
↦
Description and type
Type: string
↦
Default value
↡
Prop
css#
↦
Description and type
Type: Interpolation<Theme>
↦
Default value
↡
π˜‚π˜‚
Edit this page

Previous
Header
Next
Page components
  • Margins
  • Props
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❀ by Elastic