ActionMenu

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

export function Example() {
  const [status, setStatus] = useState("No action selected.");
  return (
    <div>
      <ActionMenu
        items={[
          {
            id: "copy",
            label: "Duplicate record",
            onSelect: () => setStatus("Record duplicated."),
          },
          {
            id: "archive",
            label: "Archive record",
            onSelect: () => setStatus("Record archived."),
          },
          {
            id: "delete",
            label: "Delete record",
            danger: true,
            onSelect: () => setStatus("Record deleted."),
          },
        ]}
      />
      <p role="status" className="mizu-field-hint">
        {status}
      </p>
    </div>
  );
}