# 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="/files/nK4WGxCrXFo8rV1UdqUI" 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).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.usegravity.app/gravity-web/components/separator.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.