---
title: Divider
description: |-
  The divider component creates clear visual separation between elements in the interface. Use divider to separate distinct content groups in forms, settings panels, lists, or page sections, helping users scan and understand content organization.

  Dividers support both horizontal and vertical orientations, along with different visual strengths for varying levels of emphasis. For more structured content grouping with headings, use [section](/docs/api/checkout-ui-extensions/2026-01/polaris-web-components/layout-and-structure/section).
api_version: 2026-01
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/layout-and-structure/divider
  md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/layout-and-structure/divider.md
---

# Divider

The divider component creates clear visual separation between elements in the interface. Use divider to separate distinct content groups in forms, settings panels, lists, or page sections, helping users scan and understand content organization.

Dividers support both horizontal and vertical orientations, along with different visual strengths for varying levels of emphasis. For more structured content grouping with headings, use [section](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/polaris-web-components/layout-and-structure/section).

## Properties

* **direction**

  **'inline' | 'block'**

  **Default: 'inline'**

  Specify the direction of the divider. This uses [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).

* **id**

  **string**

  A unique identifier for the element.

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/divider-default-C1pKEu0e.png)

### Examples

* #### Code

  ##### Default

  ```html
  <s-divider></s-divider>
  ```