Separator Example

Before the horizontal separator

After the vertical separator

Before the vertical separator
After the vertical separator

How to use this separator

Props

NameTypeDefaultDescription
orientationenum ("horizontal" | "vertical")"horizontal"Change the default rendered element for the one passed as a child, merging their props and behavior.
decorativebooleantrueWhether or not the component is purely decorative. When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree.

Playground

Import from filigran-ui :

Import {Separator} from 'filigran-ui'

<div>
  <div>
    Before the horizontal separator
  </div>
  <Separator className="my-4" />
    <div>
        After the vertical separator
    </div>
    <div className={tw(`flex h-5 items-center space-x-4 text-sm`)}>
    <div>Before the vertical separator</div>
    <Separator orientation="vertical" />
    <div>After the vertical separator</div>
  </div>
</div>