Disabled, busy and as a link

// apps/docs/examples/ui/button-states.tsx'use client';
import {useState} from 'react';
import {  Button,  buttonVariants,} from '@workspace/active-ui/components/primitives/button';import {Spinner} from '@workspace/active-ui/components/primitives/spinner';
/** * Disabled, busy, and a link that looks like a button. While busy, the * button is disabled, so a second click cannot start the action twice. */export default function ButtonStates() {  const [busy, setBusy] = useState(false);  const save = () => {    setBusy(true);    window.setTimeout(() => setBusy(false), 1500);  };  return (    <div className="flex flex-wrap items-center gap-2">      <Button disabled>Disabled</Button>      <Button onClick={save} disabled={busy} data-busy={busy || undefined}>        {busy ? <Spinner data-icon="inline-start" /> : null}        {busy ? 'Saving…' : 'Save'}      </Button>      <a href="#api" className={buttonVariants({variant: 'outline'})}>        A link, styled as a button      </a>    </div>  );}