Skip to main content
Elastic UI
Elastic UI
ComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Guidelines
    • Getting started
    • Accessibility
    • Writing
    • Testing
  • Theming
    • Theme provider
    • Color mode
    • Borders
    • Breakpoints
    • Colors
    • Sizing
  • Templates
    • Page template
    • Sitewide search
    • Super date picker
  • Layout
    • Accordion
    • Bottom bar
    • Flex
    • Flyout
    • Header
    • Horizontal rule
    • Modal
    • Page components
    • Page header
    • Panel
    • Popover
    • Resizable container
    • Spacer
  • Navigation
    • Breadcrumbs
    • Button
    • Collapsible nav
    • Context menu
    • Facet
    • Key pad menu
    • Link
    • Pagination
    • Side nav
    • Steps
    • Tabs
    • Tree view
  • Display
    • Aspect ratio
    • Avatar
    • Badge
    • Callout
    • Card
    • Comment list
    • Description list
    • Drag and drop
    • Empty prompt
    • Health
    • Icons
    • Image
    • List group
    • Loading
    • Progress
    • Skeleton
    • Stat
    • Text
    • Timeline
    • Title
    • Toast
    • Tooltip
    • Tour
  • Forms
    • Auto refresh
    • Color selection
    • Combo box
    • Compressed forms
    • Date picker
    • Expression
    • Filter group
    • Form controls
    • Form layouts
    • Form validation
    • Inline edit
    • Range sliders
    • Search bar
    • Selectable
    • Selection controls
    • Super select
  • Tabular content
    • Data grid
    • Data grid advanced
    • Data grid cells & popovers
    • Data grid schema & columns
    • Data grid style & display
    • Data grid toolbar
    • In-memory tables
    • Tables
  • Editors & Syntax
    • Code
    • Markdown editor
    • Markdown format
    • Markdown plugins
  • Elastic Charts
    • Accessibility features
    • Categorical
    • Creating charts
    • Metric Chart
    • Part to whole comparisons
    • Sizing
    • Time series
  • 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
Modal
  • Margins
  • Props
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❀ by Elastic