Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Divider

v.1.0.0 | Saturn

Usage

The name of the object of tokens to style divider is DIVIDER_STYLES.

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

Divider component style can be configured through the variant prop.

Variants

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

12345678910
const DIVIDER_OPTIONS_STYLES = {
  [VARIANT]: {
    container?: CommonStyleType,
    row?: CommonStyleType,
    labelIconContainer?: CommonStyleType,
    label?: TypographyTypes,
    icon?: IconTypes,
    tooltipVariant?: string,
    sublabel?: TypographyTypes,
    embebed?: DividerEmbebedType,

Types

  • DividerEmbebedType
123
type DividerEmbebedType = {
  [border in DividerEmbebed]: CommonStyleType;
};

Example

listOption theme object example:

12345678910
const DIVIDER_STYLES = {
  [VARIANT]: {
    container: {
      display: 'display',
      flex_direction: 'flex-direction',
      width: 'width',
      height: 'height',
      gap: 'gap',
    },
    row: {
DividerCode API
DividerAccessibility