Presence

import { useState } from "react";
import { Presence, Stack, Button, Alert } from "mizu-ui";

export function Example() {
  const [saved, setSaved] = useState(false);
  return (
    <Stack gap={20}>
      <Button size="sm" onClick={() => setSaved(!saved)}>
        Change state
      </Button>
      <Presence presenceKey={String(saved)}>
        <Alert
          title={saved ? "Changes saved" : "Draft in progress"}
          tone={saved ? "success" : "neutral"}
        >
          {saved
            ? "The current draft is ready for review."
            : "Keep shaping the idea."}
        </Alert>
      </Presence>
    </Stack>
  );
}