Components

Divider Bar

AppDividerBar — a house section divider that separates stacked sections down a page, with an optional title and a right-aligned action group on the divider line. Built on the same divider convention as the Action Bar.

Source in the MFEs
AppActionBar divider contractDivider usage across list pages

AppDividerBar

Component

House section divider with an optional title and a right-aligned action group.

Download .zip
Install tosrc/components/common/Requiresantd
  • TSXAppDividerBar.tsx
  • CSSapp-divider-bar.css
  • MDREADME.md

Live example

A plain titled divider, and the variant that carries a trailing action on the same line. Both use the house mt-0 mb-2 spacing — the same divider contract the Action Bar is built from.

Preview

Section content sits below the rule.

Rows would render here.

import AppDividerBar from '@/components/common/AppDividerBar';
import { Button } from 'antd';

{/* plain section divider */}
<AppDividerBar title="Contact details" />

{/* divider with a trailing action on the same line */}
<AppDividerBar title="Line items">
  <Button size="small" type="link">Add row</Button>
</AppDividerBar>

Usage

Use it to separate stacked sections within a form or detail page. Pass a title to label the section, and children to place actions (an “Add row” link, a toggle) flush-right on the rule. With no children it renders a single Divider with standard spacing — identical to the dividers the Action Bar uses.

Props

NameTypeDefaultDescription
titleReactNode—Optional section label rendered on the divider line.
orientation'left' | 'center' | 'right''left'Where the title sits on the rule.
childrenReactNode—Optional trailing actions, aligned right on the divider line (switches to the flex layout).

Notes

One divider convention
The Divider Bar, the Action Bar and the breadcrumb divider all use the same mt-0 / mb-2 spacing so vertical rhythm stays consistent no matter which separator a page reaches for.
Don't stack dividers
If a section already sits under an AppActionBar (which ends in a divider), don’t add a Divider Bar immediately after — you’d double the rule.