# Divider

A horizontal separator. Can be a simple line or include centered text with lines on both sides.

## When to Use

- Separating sections of content
- Dividing list items or form sections
- "Or" or other labels between content blocks

## Properties

- **`children`** `ReactNode` — Optional text to display centered between two lines

### Style Defaults

- `display` — `block` (switches to `grid` when text is present)
- `height` — `1bw` (switches to `auto` when text is present)
- `fill` — `#border` (switches to `none` when text is present)
- `preset` — `c1`
- `gridArea` — `divider`

### Base Properties

Supports [Base properties](../../BaseProperties.md).

### Style Properties

These properties allow direct style application without using the `styles` prop:

- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
- **Color:** `color`, `fill`, `fade`, `image`
- **Text:** `textTransform`, `fontWeight`, `fontStyle`
- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`

## Examples

```jsx
<Divider />

<Divider>or</Divider>

<Flow gap="1x">
  <Paragraph>Section 1</Paragraph>
  <Divider />
  <Paragraph>Section 2</Paragraph>
</Flow>
```
