Separator

A component that visually or semantically separates content into distinct sections. Implements proper semantic meaning through ARIA attributes when used as a non-decorative element.

Supports horizontal and vertical orientations

Example

Architecture

sc-separator-root

Reference

  • Root

    The root separator component that renders either an accessible divider or a decorative element based on its configuration. When non-decorative, it automatically implements the appropriate ARIA attributes for accessibility.

    • Attributes

      • decorative
        boolean
        /
        default: false

        When true, indicates that the separator is purely visual and carries no semantic meaning. This removes the separator from the accessibility tree and omits ARIA attributes.

      • orientation
        enum
        /
        default: horizontal

        The orientation of the separator. When set to vertical, the separator will span vertically.

    • Classes

      • orientation-vertical

        Applied when the separator's orientation is vertical.

made for toddle