Separator
Visual or semantic divider.
Usage
Separator wraps the Bits UI Separator primitive, so it ships the right
semantics — role="separator" plus aria-orientation — instead of a bare styled <div>. Reach for it when the divider means something: a break
between two groups of content.
Account
Manage your profile and preferences.
Billing
Invoices, plans, and payment methods.
Orientation
A vertical separator is 1px wide and stretches to fill its parent, so
the parent needs a resolved height — a flex row with align-items: stretch is the usual answer.
Decorative
Not every line is meaningful. If the divider is pure decoration — a rule under a heading that
already communicates the break — set decorative so it reports role="none" and stops adding noise to the accessibility tree. Both render
identically.
Structural separator below:
Decorative separator below:
Props
Plus every native <div> attribute via prop spreading. The colour
comes from the --sve-color-default-border token, so it follows the active
theme with no extra work.
| Prop | Type | Default |
|---|---|---|
orientation Reported to assistive technology as `aria-orientation`. | 'horizontal' | 'vertical' | 'horizontal' |
decorative Drops the `separator` role so the divider is ignored by assistive technology. Use it for purely visual rules. | boolean | false |
class | string | — |