SectionTag
Compact structural text with an optional diamond marker.
Live — this one is real
Interface craft
Usage
import { SectionTag } from "mizu-ui";
export function Example() {
return <SectionTag tone="accent">Interface craft</SectionTag>;
}
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.
Inspect ui/SectionTag.tsx
Source is included in the npm package under src/ui/SectionTag.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | "muted" | "faint" | "paper" | "accent" | "muted" | Label color. |
| diamond | boolean | true | Show the marker. |
Accessibility
Readable paragraph text; use a heading element for a section title.
Motion
Static text.