Separator
The Separator
component provides a visual divider to separate content in a layout. It supports both horizontal and vertical orientations and can include an optional label.
Preview
Usage
Props
Prop | Description | Required | Value |
---|---|---|---|
className | custom style | optional | SCSS or Tailwind |
label | optional label to display | optional | string |
orientation | orientation of the separator | optional | string (horizontal/vertical), default: horizontal |
decorative | whether the separator is purely decorative | optional | boolean, default: true |
Notes
The
Separator
component uses the@radix-ui/react-separator
library for its core functionality.The
orientation
prop can be set to "horizontal" or "vertical" to control the direction of the separator.The
decorative
prop is set totrue
by default, meaning the separator is purely visual and doesn't convey any semantic meaning. Ifdecorative
is set tofalse
, it will convey a meaning to assistive technologies.You can apply custom styles through the
className
prop. The component uses predefined styles from theseparator.tailwind.js
file.If a
label
prop is provided, it will be displayed within the separator, useful for denoting sections.For more information refer to the Separator Shadcn documentation.
Last updated