Turn the controls.

Try a component, find the right state, and copy the React that makes it. Every preview here is the real thing.

Props

Text

Variant

Size

LoadingDirectional arrowDisabled

Try the component. Its actions appear here.

What you see, in React

Example.tsx

"use client";

import { useState } from "react";
import { Button } from "mizu-ui";

export function Example() {
  const [clicks, setClicks] = useState(0);
  return (
    <>
      <Button onClick={() => setClicks(clicks + 1)}>Keep the good work</Button>
      <p role="status">Clicked {clicks} times.</p>
    </>
  );
}

Import mizu-ui/styles.css once in your application. These snippets include their state and imports; preview theme and width are inspection tools. Open a component’s documentation for its full API.