# Divider

- Page: https://jiguang132.com/resources/astryx/docs/divider
- Resource: Astryx (https://jiguang132.com/resources/astryx.md)
- All guides: https://jiguang132.com/resources/astryx/docs.md

A visual separator that divides content into distinct sections. Use to create clear boundaries between groups of related content, or to demarcate interactive regions within a layout.

## Installation

```bash
npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0
```

Requires React 19+, base CSS and a Theme provider. See [Setup](/resources/astryx/docs/getting-started).

## Divider

A visual separator that divides content into distinct sections. Use to create clear boundaries between groups of related content, or to demarcate interactive regions within a layout.

| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | 'horizontal' \| 'vertical' | 'horizontal' | Orientation of the divider. |
| label | ReactNode |  | Optional label centered on the divider. Numeric zero is preserved; null, booleans, and empty strings render no label. |
| variant | 'subtle' \| 'strong' | 'subtle' | Visual weight of the divider line. |
| isFullBleed | boolean | false | Extend the divider to container edges with negative margins. |
| xstyle | StyleXStyles |  | StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value, not an inline style object like style={{}}. |

### Usage guidance

- Use subtle dividers between related content sections and strong dividers for high-contrast boundaries.
- Add a label to the divider when sections need a visible category heading.
- Avoid: Overuse dividers; rely on spacing and layout to separate content when possible.

### Theming API

```json
{
  "targets": [
    {
      "className": "astryx-divider",
      "visualProps": [
        "orientation",
        "variant"
      ]
    }
  ]
}
```

### Anatomy

- **Divider group**: Separator group that arranges one or two rules around an optional label.
- **Rule**: Painted line segment; a second segment renders when a label is present.
- **Label**: Optional content displayed between two rule segments.


## Examples

- Divider — Variants: Horizontal dividers in subtle and strong variants, plus a labeled divider. A quick visual reference for separator styles.
- Divider — Full Bleed: Divider that extends past container padding to span the full width. Use inside cards or panels when you want a clean edge-to-edge separation, like between an order summary and total.
- Divider — Variants: Subtle, labeled, and strong dividers in a single card. Use subtle between related sections, labeled for alternatives like "or", and strong for high-contrast boundaries.
- Divider — Vertical: Vertical dividers separating side-by-side metrics. Use between stat cards, toolbar groups, or any horizontal layout where you need a visual boundary between sections.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt