logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.9.2
  • Components Overview
  • General
    • Button
    • FloatButtonNew
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCodeNew
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • TourNew
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
  • Other
    • Affix
    • AppNew
    • ConfigProvider
When To Use
Examples
Horizontal
Divider with title
Text without heading style
Vertical
API
Design Token

Divider

  • TypographyGrid

    Resources

    Ant Design Charts
    Ant Design Pro
    Ant Design Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    ahooks-React Hooks Library
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Ant Design
    Medium
    Twitter
    yuqueAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconfSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTechMore Products

    yuqueYuQue-Document Collaboration Platform
    AntVAntV-Data Visualization
    EggEgg-Enterprise Node.js Framework
    kitchenKitchen-Sketch Toolkit
    xtechAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community

    A divider line separates different content.

    When To Use

    • Divide sections of article.
    • Divide inline text and links such as the operation column of table.

    Examples

    API

    Common props ref:Common props

    PropertyDescriptionTypeDefaultVersion
    childrenThe wrapped titleReactNode-
    classNameThe className of containerstring-
    dashedWhether line is dashedbooleanfalse
    orientationThe position of title inside dividerleft | right | centercenter
    orientationMarginThe 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-
    plainDivider text show as plain stylebooleantrue4.2.0
    styleThe style object of containerCSSProperties-
    typeThe direction type of dividerhorizontal | verticalhorizontal

    Design Token

    Component TokenHow to use?

    Token NameDescriptionTypeDefault Value
    orientationMarginDistance between text and edge, which should be a number between 0 and 1.number0.05
    textPaddingInlineHorizontal padding of textundefined | PaddingInline<string | number>1em
    verticalMarginInlineHorizontal margin of vertical Dividerundefined | MarginInline<string | number>8

    Global TokenHow to use?

    Horizontal

    Divider is horizontal by default. You can add text within Divider.

    expand codeexpand code
    Text without heading style

    You can use non-heading style of divider text by setting plain.

    expand codeexpand code
    Divider with title

    Divider with inner title, set orientation="left/right" to align it.

    expand codeexpand code
    Vertical

    Use type="vertical" make it vertical.

    expand codeexpand code

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

    Text

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

    Left Text

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

    Right Text

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

    Text

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

    Left Text

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

    Right Text

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

    Left Text with 0 orientationMargin

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

    Right Text with 50px orientationMargin

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.

    Text
    Link
    Link