Rule
A hairline separator with a meaningful optional label.
Live — this one is real
Next chapter
Usage
import { Rule } from "mizu-ui";
export function Example() {
return <Rule label="Next chapter" />;
}
Source & setup
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Optional visible separator text. |
| node | boolean | true | Show the diamond. |
| tone | "line" | "line-bright" | "accent" | "line" | Line color. |
Accessibility
A horizontal separator. The label is also exposed as its accessible name.
Motion
Static geometry.