Quaff

QSeparatorHorizontal

Separators divide groups of content with a horizontal or vertical line. Adjust spacing and insets, with an optional label.

Me
My procrastination
My projects
info QSeparatorHorizontal API Source
color
?: string = "outline-variant"
Color of the separator line.
inset
?: QSeparatorInset = false
Insets the separator by 16px from the selected side. `true` is an alias for "both".
size
?: CssValue | number = undefined
Size of the component using CSS size values (e.g. "40px", "1rem"). If a number is provided, it will be converted to a px value.
spacing
?: QSize = "none"
Spacing around the separator.
text
?: string = undefined
Text to display. Its position on the separator is determined by the textAlign prop.
textAlign
?: "left" | "center" | "right" = vertical ? "middle" : "center"
Horizontal alignment of the text when text prop is used.
vertical
?: false = false
Sets the separator orientation to horizontal.
info QSeparatorVertical API Source
color
?: string = "outline-variant"
Color of the separator line.
inset
?: QSeparatorInset = false
Insets the separator by 16px from the selected side. `true` is an alias for "both".
size
?: CssValue | number = undefined
Size of the component using CSS size values (e.g. "40px", "1rem"). If a number is provided, it will be converted to a px value.
spacing
?: QSize = "none"
Spacing around the separator.
text
?: string = undefined
Text to display. Its position on the separator is determined by the textAlign prop.
textAlign
?: "top" | "middle" | "bottom" = vertical ? "middle" : "center"
Vertical alignment of the text when text prop is used.
vertical
?: true = false
Sets the separator orientation to vertical.

Usage

Basic Horizontal Separator
QSeparator is used to create visual divisions between content. By default, it creates a horizontal line that spans the width of its container.

Content above the separator

Content below the separator

Vertical Separator
Use the vertical prop to create a separator that runs vertically. This is useful for creating column divisions in a horizontal layout.
Left content
Center content
Right content
Separator with Text
Add text to a separator using the text prop. This creates a visual break with a label, which can be useful for section headings or to provide context.
Section Heading

Content in this section

Text Alignment
Control the placement of text with the textAlign prop. For horizontal separators, options are "left", "center" (default), or "right". For vertical separators, options are "top", "middle" (default), or "bottom".
Left Aligned Text
Centered Text (Default)
Right Aligned Text
Top
Middle (Default)
Bottom
Spacing
Adjust the margin around the separator with the spacing prop. Options include "none" (default), "xs", "sm", "md", "lg", and "xl".
No Spacing (Default)
XS Spacing
SM Spacing
MD Spacing
LG Spacing
XL Spacing
Custom Color
Customize the color of the separator line with the color prop. You can use any color name from your theme or a custom CSS color.
Default Color (outline variant)
Primary Color
Secondary Color
Error Color
Custom Size (Thickness)
Control the thickness of the separator line with the size prop. This accepts any valid CSS size value. If a number is provided it will be treated as px.
Default Size
2px Thick (number)
3px Thick
4px Thick
Inset Separator
Use inset to add 16px of space on the left, right, or both sides.

Full-width

Left inset

Right inset

Both sides

Use in Cards
Separators are especially useful in cards to divide different sections of content.
Card Title

This is the primary content of the card.

This is a secondary section of content.

Additional Information

Here is some additional information about this card.

Decorative Separators
Separators can be used decoratively to add visual interest to a page, especially when combined with text and custom styling.
Page Section
★ Featured Content ★

This section is highlighted with a decorative separator

Accessibility Considerations
QSeparator includes appropriate ARIA attributes (aria-orientation) to ensure good accessibility. Separators with text act as visual headings but don't replace semantic heading elements (h1-h6) for screen readers.
Accessibility Best Practices
  • Use separators with text to complement, not replace, proper heading elements
  • Ensure sufficient color contrast when customizing separator colors
  • When using vertical separators, consider alternative visual cues for smaller screens
Privacy Policy