Skip to content
MIZU.

Mark

The diamond: a small marker for a state or position.

Live — this one is real

Usage

import { Mark } from "mizu-ui";

export function Example() {
  return (
    <div style={{ display: "flex", gap: 24 }}>
      <Mark size={8} />
      <Mark size={12} tone="paper" />
    </div>
  );
}

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/Mark.tsx

Source is included in the npm package under src/ui/Mark.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
sizenumber6Diamond side in pixels.
tone"accent" | "paper" | "muted" | "line""accent"Token color.

Accessibility

Decorative and hidden from assistive technology. Pair it with visible state text.

Motion

Static geometry.

Works alongside

ButtonPrimitivesSectionTagRule