2017-08-19 12:39:11 +08:00
---
category: Components
title: Divider
2024-03-22 14:22:42 +08:00
description: A divider line separates different content.
2022-11-30 20:14:41 +08:00
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*7sMiTbzvaDoAAAAAAAAAAAAADrJ8AQ/original
2023-02-09 22:17:31 +08:00
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*KPSEQ74PLg4AAAAAAAAAAAAADrJ8AQ/original
2022-11-09 12:28:04 +08:00
demo:
cols: 2
group:
title: Layout
order: 2
2017-08-19 12:39:11 +08:00
---
## When To Use
- Divide sections of article.
- Divide inline text and links such as the operation column of table.
2022-11-09 12:28:04 +08:00
## Examples
2022-11-17 17:31:26 +08:00
<!-- prettier - ignore -->
2022-11-09 12:28:04 +08:00
< code src = "./demo/horizontal.tsx" > Horizontal< / code >
< code src = "./demo/with-text.tsx" > Divider with title< / code >
< code src = "./demo/plain.tsx" > Text without heading style< / code >
< code src = "./demo/vertical.tsx" > Vertical< / code >
< code src = "./demo/customize-style.tsx" debug > Style Customization< / code >
2023-08-11 13:43:44 +08:00
< code src = "./demo/component-token.tsx" debug > Component Token< / code >
2022-11-09 12:28:04 +08:00
2017-08-19 12:39:11 +08:00
## API
2023-08-08 18:27:48 +08:00
Common props ref: [Common props](/docs/react/common-props)
2019-07-11 14:14:33 +08:00
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
2021-09-19 11:28:45 +08:00
| children | The wrapped title | ReactNode | - | |
2020-06-30 09:01:49 +08:00
| className | The className of container | string | - | |
| dashed | Whether line is dashed | boolean | false | |
| orientation | The position of title inside divider | `left` \| `right` \| `center` | `center` | |
2023-06-03 12:45:26 +08:00
| orientationMargin | The margin-left/right between the title and its closest border, while the `orientation` must be `left` or `right` , If a numeric value of type `string` is provided without a unit, it is assumed to be in pixels (px) by default. | string \| number | - | |
2020-08-14 10:58:58 +08:00
| plain | Divider text show as plain style | boolean | true | 4.2.0 |
2020-06-30 09:01:49 +08:00
| style | The style object of container | CSSProperties | - | |
| type | The direction type of divider | `horizontal` \| `vertical` | `horizontal` | |
2023-03-27 15:33:22 +08:00
## Design Token
< ComponentTokenTable component = "Divider" > < / ComponentTokenTable >