---
title: Divider
description: Create clear visual separation between elements in your user interface.
api_version: 2025-10
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/structure/divider
  md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/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

* #### Code

  ##### Default

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

## Preview

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