Separator
Lightweight visual divider for grouping content, separating sections, and clarifying layout hierarchy in PyColors UI.
Visual separation without visual noiseLink to section
The Separator component creates a thin divider between related pieces of interface.
Use it for:
- separating page sections
- grouping card content
- dividing toolbar actions
- separating metadata rows
- creating vertical dividers in compact layouts
- improving scanability without adding heavy containers
Separator is intentionally minimal. It uses PyColors semantic tokens such as bg-border, so it adapts to light mode, dark mode, and product theme overrides.
Core idea
Separator should clarify structure, not decorate the page.
ImportLink to section
import { Separator } from "@pycolors/ui";Basic usageLink to section
Use a horizontal Separator to divide related content blocks.
Account
Manage profile settings and preferences.
Billing
Review invoices, plan status, and payment settings.
Default behavior
Separator is decorative by default. It renders without separator semantics unless you explicitly set decorative={false}.
When to use SeparatorLink to section
Use Separator when spacing alone is not enough to communicate grouping.
Sections
Toolbars
Hierarchy
OrientationLink to section
Separator supports horizontal and vertical orientation.
HorizontalLink to section
Horizontal is the default orientation.
Starter Pro
Production-ready SaaS starter with authentication, billing, and protected app foundations.
VerticalLink to section
Use a vertical Separator inside a flex row. Give the parent a height or use self-stretch.
Free
Pro
Enterprise
Vertical rule
Vertical separators need layout height. Use them inside rows, toolbars, navs, or compact metadata groups.
Decorative vs semanticLink to section
By default, Separator is decorative and uses role="none".
Set decorative={false} when the separator communicates a meaningful boundary for assistive technologies.
Personal details
Name, email, and account profile.
Workspace details
Team, role, and organization settings.
Semantic rule
Most separators should stay decorative. Use semantic separators only when the boundary itself helps describe the structure.
Settings cardLink to section
Notifications
Choose how PyColors should contact you.
Product updates
Receive release notes and roadmap updates.
Security alerts
Important account and billing notifications.
Compact metadataLink to section
Usage patternsLink to section
Start with spacing
Use spacing first. Add Separator only when visual grouping is still unclear.
Keep dividers subtle
Use semantic border tokens. Avoid strong colors unless the divider is part of a very specific branded surface.
Pick the right orientation
Use horizontal dividers for stacked content and vertical dividers for compact rows.
Avoid over-fragmenting the page
Too many separators make the UI feel heavy and harder to scan.
Separator vs Border vs CardLink to section
| Situation | Use |
|---|---|
| Split content inside the same surface | Separator |
| Define the edge of a surface | Border |
| Group content into a distinct object | Card |
| Divide toolbar action groups | Separator |
| Separate unrelated page regions | Section spacing or Card |
| Emphasize a critical state | Alert or semantic color |
Decision rule
Use Separator inside a surface. Use Card when the content deserves its own surface.
APILink to section
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Divider direction |
decorative | boolean | true | Removes separator semantics when true |
className | string | — | Additional Tailwind classes |
...props | React.HTMLAttributes<HTMLDivElement> | — | Standard div attributes |
TypeScript typesLink to section
export interface SeparatorProps
extends React.HTMLAttributes<HTMLDivElement> {
orientation?: "horizontal" | "vertical";
decorative?: boolean;
}AccessibilityLink to section
- Decorative separators use
role="none". - Semantic separators use
role="separator". - Semantic separators include
aria-orientation. - Most visual dividers should be decorative.
- Do not use Separator as a replacement for headings.
- Do not rely on a divider alone to explain hierarchy.
Accessibility rule
If the separator does not add meaning for screen reader users, keep it decorative.
Prefer / avoidLink to section
Prefer
- subtle dividers inside cards and panels
- horizontal separators for stacked sections
- vertical separators for compact rows
- decorative separators by default
- spacing before adding extra lines
Avoid
- using separators as decoration
- too many dividers in dense layouts
- strong colors for neutral separation
- semantic separators without structural value
- replacing headings with divider lines