Primitives

import { useState } from "react";
import {
  SectionTag,
  Rule,
  Badge,
  Spinner,
  Frame,
  Slider,
  Tooltip,
} from "mizu-ui";

export function Header() {
  const [v, setV] = useState(40);
  return (
    <>
      <SectionTag tone="muted">01 — Foundation</SectionTag>
      <Rule label="Interlude" />
      <Badge tone="accent">Live</Badge>
      <Spinner size={12} />
      <Frame label="Fig. 01">
        <p>Framed content</p>
      </Frame>
      <Slider label="Density" value={v} min={0} max={100} onChange={setV} />
      <Tooltip label="Help">
        <button>Focus me</button>
      </Tooltip>
    </>
  );
}