# 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

<div align="left"><figure><img src="https://3357577683-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LlnrBGdA8s50Vnplq1j%2Fuploads%2FjisTlCHcG7KsooZ3BDdH%2Fseparator.png?alt=media&#x26;token=7c475b27-7a83-40b9-8869-4839d490aad3" alt="" width="254"><figcaption></figcaption></figure></div>

### Usage

```
import { Separator } from 'components/lib';

function Example(){
  return (
    <div>
    
      <Separator label='Section 1' orientation='horizontal' />
      <div>Content for section 1</div>
      <Separator label='Section 2' orientation='horizontal' />
      <div>Content for section 2</div>
      
    </div>
  );
}
```

### 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 to `true` by default, meaning the separator is purely visual and doesn't convey any semantic meaning. If `decorative` is set to `false`, it will convey a meaning to assistive technologies.
* You can apply custom styles through the `className` prop. The component uses predefined styles from the `separator.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](https://ui.shadcn.com/docs/components/separator).