Divider

A horizontal or vertical separator for grouping and organizing content.

Overview

Dividers are <hr> elements that can horizontal or vertical.

Item one
Item two
Item three
Item four
Item one
Item one
Item one
Item one

Example: Divider

  import { Divider } from '@skiff-org/skiff-ui';
    <div>
      Item One
      <Divider />
      Item Two
      <Divider color='secondary' />
      Item Three
      <Divider color='tertiary' />
      Item Four
    </div>

    <div>
      Item One
      <Divider type={DividerType.VERTICAL} />
      Item Two
      <Divider color='secondary' type={DividerType.VERTICAL} />
      Item Three
      <Divider color='tertiary' type={DividerType.VERTICAL} />
      Item Four
    </div>

Properties

  • Name
    color
    Type
    DividerColor
    Description

    Background color of the Banner.

  • Name
    forceTheme
    Type
    ThemeMode
    Description

    Force the theme (dark or light mode) of the divider, regardless of app theme.

  • Name
    height
    Type
    string
    Description

    Set a custom divider height. Default is 100%.

  • Name
    type
    Type
    DividerType
    Description

    Divider type can be either horizontal or vertical.

  • Name
    weight
    Type
    string
    Description

    Set a custom divider width. Default is 2px.

Types

  type DividerColor = 'primary' | 'secondary' | 'tertiary';

  enum DividerType {
    HORIZONTAL = 'horizontal',
    VERTICAL = 'vertical'
  }