Separator
Clean visual dividers for organizing content. Use the right variant based on background context.
Default Separator
Standard horizontal and vertical separators on white/canvas backgrounds.
Tinted Trays Design System
A structured, clinical approach to UI design.
Variant Comparison
Three variants for different background contexts. Choose based on where the separator will be used.
Default (on white background)
Use on canvas/background surfaces.
Muted (lighter)
Use in dense content areas where default feels too heavy.
OnTray (on tray background)
Use inside tray containers where more contrast is needed.
Labeled Separator
Separators with centered text labels for section headers.
Decorative Patterns
Alternative separator styles achieved with custom classes.
Dotted
Dashed
Thick
Gradient Fade
Vertical Orientation
Vertical separators for inline content division.
Projects
Tasks
Complete
In List Context
Separators between list items on a tray background.
Account Settings
Manage your profile
Notifications
Configure alerts
Privacy
Control your data
Accessibility
Non-decorative separators with semantic meaning for assistive technology.
Use decorative=false when the separator has semantic meaning.
Screen readers will announce this as a separator element.