Button Usage Standards

import { Button } from '@/shared/ui/button';

// ✅ CORRECT
<Button variant="ghost" size="icon" aria-label="Edit item" onClick={onEdit}>
  <Pencil className="h-4 w-4" aria-hidden="true" />
</Button>
<Button variant="ghost" size="icon" aria-label="Go back" onClick={onBack}>
  <ArrowLeft className="h-4 w-4" aria-hidden="true" />
</Button>

// ❌ WRONG: No accessible name
<Button variant="ghost" size="icon" onClick={onEdit}>
  <Pencil className="h-4 w-4" />
</Button>

// ✅ CORRECT
<Button type="submit" loading={isPending}>Save</Button>
<Button onClick={handleDelete} variant="destructive" loading={deleteMutation.isPending}>Delete</Button>

// ❌ AVOID: Manual disabled without built-in spinner
<Button type="submit" disabled={isPending}>Save</Button>

// ✅ CORRECT
<Button variant="ghost" size="icon" asChild>
  <Link to="/charges" aria-label="Back to charges">
    <ArrowLeft className="h-4 w-4" aria-hidden="true" />
  </Link>
</Button>

// ✅ CORRECT: Visible text
<Button variant="outline" asChild>
  <Link to="/dashboard">Go to dashboard</Link>
</Button>

<DialogFooter>
  <Button variant="outline" onClick={() => onOpenChange(false)}>Cancel</Button>
  <Button type="submit" loading={isPending}>Save</Button>
</DialogFooter>