Divider | iTwinUI

A divider can be used to separate a layout into different sections of content or element.

import * as React from 'react';
import { Divider, Text } from '@itwin/itwinui-react';

export default () => {
  return (
    <div className='demo-container'>
      <Text variant='subheading'>Section 1</Text>
      <Divider />
      <Text variant='subheading'>Section 2</Text>
    </div>
  );
};

Vertical

The Divider component is displayed horizontally by default. To display it vertically, use the orientation prop.

import * as React from 'react';
import { Divider, Text } from '@itwin/itwinui-react';

export default () => {
  return (
    <div className='demo-container'>
      <Text variant='subheading'>Section 1</Text>
      <Divider orientation='vertical' />
      <Text variant='subheading'>Section 2</Text>
    </div>
  );
};

Props

Prop	Description	Default
orientation	Sets the orientation of the divider "horizontal" \| "vertical"	'horizontal'
as	"symbol" \| "object" \| "hr" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| ... 158 more ... \| FunctionComponent<...>