import Divider from 'primevue/divider';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/divider/divider.min.js"></script>
Divider has two orientations defined with the layout property, default is "horizontal" and the alternative is "vertical".
<div>Content 1</div>
<Divider />
<div>Content 2</div>
Style of the border is configured with the type property and supports 3 values; default is "solid" and other possibilities are "dashed" and "dotted".
<div>Content 1</div>
<Divider type="dashed"/>
<div>Content 2</div>
Vertical divider is enabled by setting the layout property as "vertical".
<div class="flex">
<div>Content 1</div>
<Divider layout="vertical" />
<div>Content 2</div>
<Divider layout="vertical" />
<div>Content 3</div>
</div>
Any content placed inside is rendered within the boundaries of the divider. In addition, location of the content is configured with the align property. In horizontal layout, alignment options are "left", "center" and "right" whereas vertical mode supports "top", "center" and "bottom".
<div>Content 1</div>
<Divider align="left">
<div class="inline-flex align-items-center">
<i class="pi pi-user mr-2"></i>
<b>Icon</b>
</div>
</Divider>
<div>Content 2</div>
<Divider align="center">
<span class="p-tag">Badge</span>
</Divider>
<div>Content 3</div>
<Divider align="right">
<Button label="Button" icon="pi pi-search" class="p-button-outlined"></Button>
</Divider>
<div>Content 4</div>
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| align | string | null | Alignment of the content, options are "left", "center", "right" for horizontal layout and "top", "center", "bottom" for vertical. |
| layout | string | horizontal | Specifies the orientation, valid values are "horizontal" and "vertical". |
| type | string | solid | Border style type, default is "solid" and other options are "dashed" and "dotted". |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-divider | Container element. |
| p-divider-horizontal | Container element in horizontal layout. |
| p-divider-vertical | Container element in vertical layout. |
| p-divider-solid | Container element with solid border. |
| p-divider-dashed | Container element with dashed border. |
| p-divider-dotted | Container element with dotted border. |
| p-divider-left | Container element with content aligned to left. |
| p-divider-right | Container element with content aligned to right. |
| p-divider-center | Container element with content aligned to center. |
| p-divider-bottom | Container element with content aligned to bottom. |
| p-divider-top | Container element with content aligned to top. |
Divider uses a separator role with aria-orientation set to either "horizontal" or "vertical".
Component does not include any interactive elements.
None.