Divider
Thin horizontal or vertical rule used to separate logical sections of a layout.
Thin horizontal or vertical rule used to separate logical sections of a layout.
import { Divider } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
orientation | Optional | DividerOrientation | undefined | — | Line orientation |
dashed | Optional | boolean | undefined | — | Line style |
dotted | Optional | boolean | undefined | — | — |
children | Optional | React.ReactNode | — | Text or node rendered in the middle of the divider |
align | Optional | "center" | "left" | "right" | undefined | — | Horizontal alignment of the label |
plain | Optional | boolean | undefined | — | Plain text style — no border around label |
className | Optional | string | undefined | — | Custom className |
Usage
A styled horizontal or vertical separator line, optionally containing a label. Wraps Radix UI @radix-ui/react-separator.
Notes
- Labels are ignored on vertical dividers.
dottedtakes precedence overdashedwhen both are set.
Example
/** * Runnable example for Divider. */import { Divider } from '@tetherto/mdk-react-devkit'export const DividerExample = () => ( <div className="mdk-example-col"> {/* Solid (default) */} <Divider /> {/* Dashed */} <Divider dashed /> {/* Dotted */} <Divider dotted /> {/* With centered label */} <Divider>Section</Divider> {/* With left-aligned label */} <Divider align="left">Pool Statistics</Divider> {/* Plain (no border around label) */} <Divider plain>or</Divider> </div>)