Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Line Separator

v.1.0.0 | Saturn

Usage

The name of the object of tokens to style line separator is LINE_SEPARATOR_STYLES.

You can not change the name of the object of tokens.

Line Separator component style can be configured through the variant prop.

Line Variant

Variants can modify the styles for the line. The tokens used are:

12345
const LINE_SEPARATOR_STYLES = {
  [LINE_VARIANT]: {
    buildLineStyles?: (position?: LineSeparatorPositionType) => CSSProp
  }
}

Label Variant

Variants can modify the styles for the label.The tokens used are:

123456
const LINE_SEPARATOR_STYLES = {
  [LABEL_VARIANT]: {
    labelContainer?: CommonStyleType;
    label?: TypographyTypes;
  }
}

Types

  • LineSeparatorPositionType
123456
enum LineSeparatorPositionType {
  LEFT = 'left',
  TOP = 'top',
  RIGHT = 'right',
  BOTTOM = 'bottom',
}

Example

lineSeparator theme object example:

12345678910
const LINE_SEPARATOR_STYLES = {
  [LINE_VARIANT]: {
    buildLineStyles: lineSeparatorStyledBuild({ border_color: 'color', border_weight: 'border-weight' }),
  },
  [LABEL_VARIANT]: {
    labelContainer: {
      display: 'display',
      align_items: 'align_items',
      width: 'width',
      position: 'position',
Line SeparatorCode API
Line SeparatorAccessibility