# Separator
> A divider used to provide visual separation of different content.

## Import

```js
import { Separator } from '@gemini-suite/vera-react';
```

## Examples

### Basic

**Separator** displays a thin horizontal or vertical line, and renders a `div` tag.

```jsx
<Separator />
```

### Orientation

Provide the `orientation` property and set it to either `horizontal` or `vertical`. **Separator** will extend to parent element's width/height.

```jsx
<Separator orientation="horizontal" />
```

If the `vertical` orientation is used, make sure that the parent element is assigned a height or provide explicit size via `size` prop.

```jsx
<Flex main="center" css={{ height: 50 }}>
  <Separator orientation="vertical" />
</Flex>
```

### Size

Use `size` prop to control the size of the **Separator**. When not provided, the separator takes full width or height of the container.

Specifying `size` is useful when using vertical separators to visually split a collection of horizontally aligned items (such as buttons) into related groups.

<Callout variant="tip">

See experimental [Action Bar component](https://next--698f15fa99e7b146f9002f64.chromatic.com/?path=/story/components-actionbar--default) if you need the collection of button groups to be responsive.

</Callout>

```jsx
<Flex flow="column" gap="spacingL" css={{ overflowX: 'auto' }}>
  <Flex css={{ width: 'max-content' }}>
    <Button variant="outline">{'Edit'}</Button>
    <Button variant="outline">{'Duplicate'}</Button>
    <Separator orientation="vertical" isDecorative size="medium" />
    <Button variant="outline">{'Import from CSV'}</Button>
    <Button variant="outline">{'Export to CSV'}</Button>
  </Flex>
  <Flex gap="spacingS" css={{ width: 'max-content' }}>
    <Button variant="outline" size="small">
      {'Edit'}
    </Button>
    <Button variant="outline" size="small">
      {'Duplicate'}
    </Button>
    <Separator orientation="vertical" isDecorative size="small" />
    <Button variant="outline" size="small">
      {'Import from CSV'}
    </Button>
    <Button variant="outline" size="small">
      {'Export to CSV'}
    </Button>
  </Flex>
</Flex>
```

### Decorative

**Separator** should generally be used when there is a requirement for a semantic divider element. Where there is need for a purely decorative **Separator**, `isDecorative` property should be included.

```jsx
<Flex flow="column" gap="spacingS">
  <Box>Item 1</Box>
  <Separator isDecorative />
  <Box>Item 2</Box>
  <Separator isDecorative />
  <Box>Item 3</Box>
</Flex>
```

---

## Accessibility

**Separator** implements the [WAI-ARIA Separator Role](https://www.w3.org/TR/wai-aria-1.2/#separator) and represents a thematic break.

Use **Separator** to create groupings and divide sections of content from each other.

---

## API Reference

| Name           | Type                                                      | Default        | Description                                                                                                                                                                                                                                                                                  | Required |
| -------------- | --------------------------------------------------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `as`           | `keyof JSX.IntrinsicElements \| React.ComponentType<any>` | `div`          | Change the component to a different HTML tag or custom component. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.   For more details, read our [Composition](/get-started/composition#polymorphism) guide. |          |
| `css`          | `StitchesCss`                                             |                | Apply styles directly to a component in a similar way how you would define inline styles. Vera uses [Stitches](https://stitches.dev/) under the hood with a fully-typed API and support for features like tokens, media queries or variants.                                                 |          |
| `orientation`  | `"horizontal" \| "vertical"`                              | `"horizontal"` | The orientation of the separator.                                                                                                                                                                                                                                                            |          |
| `isDecorative` | `boolean`                                                 | `false`        | When `true`, signifies that the separator is used only for presentation purposes.                                                                                                                                                                                                            |          |