# Divider

The Divider component is used to separate content into different sections.

## Design & usage guidelines

Divider comes with no spacing around it. This means that it should be used
within a [Content](../Content/Content.md) component.

### Size

For different levels of segmentation, you may find the need to use larger
Dividers. As Dividers increase in size, they get lighter to offset the visual
impact of their additional weight.

## Related components

* To segment different groups of content, use [Card](../Card/Card.md)
* For guidance on borders in general, see our [Borders guide](../Borders/Borders.md)


## Component customization

### UNSAFE\_ props (advanced usage)

General information for using `UNSAFE_` props can be found
[here](../customizing-components/customizing-components.md).

**Note**: Use of `UNSAFE_` props is **at your own risk** and should be
considered a **last resort**. Future Divider updates may lead to unintended
breakages.

Divider has one element that can be targeted with classes or styles:

* `container`: The main `div` element of the Divider

#### UNSAFE\_className (web)

Use `UNSAFE_className` to apply custom classes to the Divider. This can be
useful for applying styles via CSS Modules.

```tsx
// YourComponent.tsx
import styles from "./YourStyles.module.css";

<Divider
  UNSAFE_className={{
    container: styles.customDivider,
  }}
/>

// YourStyles.module.css
.customDivider {
  background-color: var(--color-background-brand-bold);
  height: 5px;
}
```

#### UNSAFE\_style (web)

The `UNSAFE_style` prop provides granular control over the Divider's appearance
through inline styles.

```tsx
<Divider
  UNSAFE_style={{
    container: {
      backgroundColor: "var(--color-background-danger-bold)",
      height: "10px",
    },
  }}
/>
```


## Props

### Web

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `direction` | `"horizontal" | "vertical"` | No | `horizontal` | The direction of the divider |
| `size` | `"base" | "large" | "larger" | "largest"` | No | `base` | The weight of the divider. |
| `testID` | `string` | No | — | A reference to the element in the rendered output |
| `UNSAFE_className` | `{ readonly container?: string; }` | No | — | **Use at your own risk:** Custom classNames for specific elements. This should only be used as a **last resort**. Usi... |
| `UNSAFE_style` | `{ readonly container?: CSSProperties; }` | No | — | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |