horizontal-rule.mdx

keywords	EuiHorizontalRule

Horizontal rule

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

import React from 'react';
import { EuiHorizontalRule, EuiCode } from '@elastic/eui';

export default () => (
  <div css={{ textAlign: "center" }}>
    <EuiCode>quarter</EuiCode>
    <EuiHorizontalRule size="quarter" />
    <EuiCode>half</EuiCode>
    <EuiHorizontalRule size="half" />
    <EuiCode>full (default)</EuiCode>
    <EuiHorizontalRule />
  </div>
);

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.

import React from 'react';
import { css } from '@emotion/react';
import { EuiHorizontalRule, EuiCode, useEuiTheme } from '@elastic/eui';

const ColorMarginContainer = ({ children }) => {
  const { euiTheme } = useEuiTheme();

  return (
    <div css={css`
      display: flex;
      margin-block-end: ${euiTheme.size.base};
      background-color: var(--eui-background-color-primary);
      /* override docusaurus' global for <hr> */
      --ifm-hr-margin-vertical: 0;
      /* ensure enough contrast with background */
      .euiHorizontalRule {
        background-color: ${euiTheme.colors.text};
      }
    `}>{children}</div>
  )
};

export default () => (
    <>
      <EuiCode>none</EuiCode>
      <ColorMarginContainer>
        <EuiHorizontalRule margin="none" />
      </ColorMarginContainer>
      <EuiCode>xs</EuiCode>
      <ColorMarginContainer>
        <EuiHorizontalRule margin="xs" />
      </ColorMarginContainer>
      <EuiCode>s</EuiCode>
      <ColorMarginContainer>
        <EuiHorizontalRule margin="s" />
      </ColorMarginContainer>
      <EuiCode>m (default)</EuiCode>
      <ColorMarginContainer>
        <EuiHorizontalRule margin="m" />
      </ColorMarginContainer>
      <EuiCode>l</EuiCode>
      <ColorMarginContainer>
        <EuiHorizontalRule margin="l" />
      </ColorMarginContainer>
      <EuiCode>xl</EuiCode>
      <ColorMarginContainer>
        <EuiHorizontalRule margin="xl" />
      </ColorMarginContainer>
      <EuiCode>xxl</EuiCode>
      <ColorMarginContainer>
        <EuiHorizontalRule margin="xxl" />
      </ColorMarginContainer>
    </>
);

Props

import docgen from '@elastic/eui-docgen/dist/components/horizontal_rule';