—

Divider

Visual separator — line, thick separator, or dashed. Horizontal or vertical.

type: "divider"atomsleaf

Horizontal Line

Default 1px horizontal divider

{
  "type": "divider",
  "data": {
    "ui": {
      "layout": {
        "size": {
          "width": "fill"
        }
      }
    }
  }
}

Quick Start

{
  "type": "divider",
  "data": {}
}

Data Fields

Field	Type	Default	Description
divider_type	enum lineseparatordash	line	Divider thickness style
direction	enum horizontalvertical	horizontal	Orientation

Style Fields

Field	Type	Default	Description
color	color	—	Divider color (default neutral.200)

Layout Fields

Parent Layout Fields

Examples

Separator (8dp)

Thick separator — commonly used between sections

{
  "type": "divider",
  "data": {
    "divider_type": "separator",
    "ui": {
      "layout": {
        "size": {
          "width": "fill"
        }
      }
    }
  }
}

Dashed

Dashed horizontal divider

{
  "type": "divider",
  "data": {
    "divider_type": "dash",
    "ui": {
      "layout": {
        "size": {
          "width": "fill"
        }
      }
    }
  }
}

Vertical Divider

Vertical line between items (place inside a row with fixed height)

Left

Right

{
  "type": "row",
  "data": {
    "children": [
      {
        "type": "text",
        "data": {
          "value": "Left",
          "ui": {
            "style": {
              "typography": {
                "style": "body2Regular"
              }
            }
          }
        }
      },
      {
        "type": "divider",
        "data": {
          "direction": "vertical",
          "ui": {
            "layout": {
              "size": {
                "height": 24
              }
            }
          }
        }
      },
      {
        "type": "text",
        "data": {
          "value": "Right",
          "ui": {
            "style": {
              "typography": {
                "style": "body2Regular"
              }
            }
          }
        }
      }
    ],
    "ui": {
      "layout": {
        "spacing": 12,
        "crossAxis": "center"
      }
    }
  }
}

Custom Color

Divider with primary color

{
  "type": "divider",
  "data": {
    "ui": {
      "style": {
        "color": {
          "palette": "primary",
          "shade": 300
        }
      },
      "layout": {
        "size": {
          "width": "fill"
        }
      }
    }
  }
}

Image

Spacer