@blueprintjs/core/src/components/divider/divider.md

Core styles & components

@# Divider

**Divider** visually separate contents with a thin line and margin on all sides.
It works best in flex layouts where they will adapt to orientation without
additional styles. Otherwise, a **Divider** will appear as a full-width 1px-high block element.

@## Usage

```ts copy
import { Divider } from "@blueprintjs/core";
```

```tsx
Option 1
<Divider />
Option 2
```

@## Examples

@### Basic

Use **Divider** to separate blocks of content within a page or container. By default, it spans the full width of its container.

@reactCodeExample DividerBasicExample

@### Compact

The `compact` prop removes the margin from the divider, making it flush with adjacent content.

```tsx
<Divider compact />
```

@### Vertical

When used inside a flex container, **Divider** adapts to the layout's direction. It becomes a vertical divider when placed between flex items.

@reactCodeExample DividerVerticalExample

@## Interactive Playground

@reactExample DividerPlaygroundExample

@## Props interface

@interface DividerProps