---
title: Divider
description: >-
  The `Divider` component creates visual separation between content sections by
  rendering a horizontal or vertical line. Use it to organize information and
  improve content hierarchy.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-structure/divider
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/layout-and-structure/divider.md
---

# Divider

The `Divider` component creates visual separation between content sections by rendering a horizontal or vertical line. Use it to organize information and improve content hierarchy.

## Properties

Configure the following properties on the `Divider` component.

* direction

  'inline' | 'block'

  Default: 'inline'

  The direction in which children are laid out using logical properties:

  * `'block'`: Vertical arrangement along the block axis (typically top to bottom) without wrapping
  * `'inline'`: Horizontal arrangement along the inline axis (typically left to right) with automatic wrapping when space is insufficient

* id

  string

  A unique identifier for the element used for targeting with CSS, JavaScript, or accessibility features.

### Examples

* #### Separate content sections with a divider

  ##### Description

  Separate content sections using a \`Divider\` component. This example shows a basic horizontal divider.

  ##### Default

  ```HTML
  <s-divider />
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/divider-default.png)

## Best practices

* **Choose appropriate direction:** Use `inline` (horizontal) for most content separation. Use `block` (vertical) for columns or sidebar boundaries.
* **Avoid overuse:** Use dividers strategically. In dense interfaces, consider whitespace or typography hierarchy instead.