Divider

Two hairlines with a label, badge or button between them — for breaking a list or a form into sections.

tsx

1import { DividerText } from "@pestoui/core"

Default

Today

center splits the remaining width evenly; start and end pin the label behind a short lead-in rule.

Center

Start

End

The slot is ordinary markup, so it can hold interactive content — the rules are decorative and hidden from assistive tech.

3 new runs

Prop	Type	Default	Description
align	"center" \| "start" \| "end"	"center"	Which rule grows — where the label ends up sitting.
children	ReactNode	—	The label slot between the two rules. Omit it for a plain rule.
className	string	—	Merged onto the root; the component is a plain <div> and takes every div prop.

Pesto UI · 117 documented components