---
title: Divider
description: A divider separates content and represents a thematic break between elements.
api_version: 2023-07
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/structure/divider
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/structure/divider.md
---

# Divider

A divider separates content and represents a thematic break between elements.

## DividerProps

* **size**

  **Extract\<Size, 'small' | 'base' | 'large' | 'extraLarge'>**

  **Default: 'small'**

  Use to create dividers with varying widths.

* **direction**

  **Direction**

  **Default: 'inline'**

  Use to specify direction of divider.

* **alignment**

  **Alignment**

  **Default: 'center'**

  Use to specify alignment of contents of divider.

* **id**

  **string**

  A unique identifier for the component.

### Size

```ts
'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'
```

### Direction

```ts
'inline' | 'block'
```

### Alignment

```ts
'start' | 'center' | 'end'
```

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/divider-default-KZtr6bAn.png)

### Examples

* #### Basic Divider

  ##### React

  ```tsx
  import {
    reactExtension,
    Divider,
  } from '@shopify/ui-extensions-react/checkout';

  export default reactExtension(
    'purchase.checkout.block.render',
    () => <Extension />,
  );

  function Extension() {
    return <Divider />;
  }
  ```

  ##### JS

  ```js
  import {extension, Divider} from '@shopify/ui-extensions/checkout';

  export default extension('purchase.checkout.block.render', (root) => {
    const divider = root.createComponent(Divider);

    root.appendChild(divider);
  });
  ```