Content Divider
Divider separating content sections. Three styles × six types (heading, text, button, button icon, button group, button group icon).
import
{ ContentDivider } from "@pepulux/ui"Styles
Notifications
Notifications
Notifications
Type: Text
Label sits between the lines.
Today
Section 2
Type: Button and Button icon
Uses the Button atom.
Type: Button group and Button group icon
Uses the ButtonGroup atom.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| style | "single-line" | "dual-line" | "background-fill" | "single-line" | Figma Style |
| type | "heading" | "text" | "button" | "button-icon" | "button-group" | "button-group-icon" | "heading" | Figma Type — what sits in the middle of the divider |
| label | string | — | Text for heading / text types |
| buttonLabel | string | "Add" | Label for type=button |
| groupItems | { id: string; label: string; isActive?: boolean }[] | — | Items for type=button-group |
| onButtonClick | () => void | — | Click handler for button / button-icon |
| onGroupClick | (id: string) => void | — | Click handler for group items (prev / add / next for icon group) |
| className | string | — | Additional CSS classes |