Installation#
npmpnpmyarnbun
Examples#
Default#
Default
Sizes#
Separators come in multiple sizes plus a full-width option.
Sizes
Colors#
Separators support different color options.
Colors
Orientation#
Separators can be horizontal or vertical.
Horizontal
Vertical
Vertical Sizes#
Vertical Sizes
In Navigation#
Navigation Example
Between Sections#
Section Divider
Toolbar Separator#
Toolbar
Centered with Text#
With Text
Usage#
Import
import { Separator } from "@sugarcoat/ui-nxt";Usage
// Horizontal separator
<Separator />
// Vertical separator
<Separator orientation="vertical" size="md" />
// Colored separator
<Separator color="primary" />Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | Direction of the separator |
| size | "xs" | "sm" | "md" | "lg" | "full" | "full" | Length of the separator |
| color | "default" | "primary" | "accent" | "reverse" | "default" | Color of the separator |
| css | SystemStyleObject | - | Additional CSS styles using Panda CSS syntax |
Accessibility#
- Uses
role="separator"for proper semantic meaning aria-orientationis set automatically based on the orientation prop- Decorative separators are properly hidden from assistive technologies
- Use meaningful spacing around separators to indicate content grouping