Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# Separator

Visual divider line between content sections

## Example​

    import { Separator } from "@databricks/appkit-ui/react"

    export default function SeparatorExample() {
      return (
        <div>
          <div className="space-y-1">
            <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
            <p className="text-sm text-muted-foreground">
              An open-source UI component library.
            </p>
          </div>
          <Separator className="my-4" />
          <div className="flex h-5 items-center space-x-4 text-sm">
            <div>Blog</div>
            <Separator orientation="vertical" />
            <div>Docs</div>
            <Separator orientation="vertical" />
            <div>Source</div>
          </div>
        </div>
      )
    }

## Separator​

Visual divider line between content sections

Source: `packages/appkit-ui/src/react/ui/separator.tsx`

### Props​

Prop | Type | Required | Default | Description
--- | --- | --- | --- | ---
`orientation` | `enum` |  | `vertical` | Either `vertical` or `horizontal`. Defaults to `horizontal`.
`decorative` | `boolean` |  | - | Whether 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.
`asChild` | `boolean` |  | - | -

### Usage​

    import { Separator } from '@databricks/appkit-ui';

    <Separator /* props */ />