---
title: Divider
description: Create clear visual separation between elements in your user interface.
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

Create clear visual separation between elements in your user interface.

## 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>
  ```