Button

"use client";

import { Button } from "@/ui";

export default function Demo() {
  return (
    <div className="flex flex-wrap gap-3">
      <Button variant="primary">Primary</Button>
      <Button variant="danger">Destructive</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="text">Text</Button>
    </div>
  );
}

"use client";

import { useState } from "react";
import { Button } from "@/ui";

export default function Demo() {
  const [loading, setLoading] = useState(false);

  const handleClick = () => {
    setLoading(true);
    setTimeout(() => setLoading(false), 2000);
  };

  return (
    <div className="flex flex-wrap gap-3">
      <Button loadingConfig={{ loading }} onClick={handleClick}>
        Click Me
      </Button>
      <Button
        variant="danger"
        loadingConfig={{ loading }}
        onClick={handleClick}
      >
        Delete
      </Button>
      <Button
        variant="outline"
        loadingConfig={{ loading }}
        onClick={handleClick}
      >
        Submit
      </Button>
    </div>
  );
}

"use client";

import { Heart, Settings, Star } from "lucide-react";
import { Button } from "@/ui";

export default function Demo() {
  return (
    <div className="flex flex-wrap gap-3">
      <Button>
        <Heart className="size-4" />
        Like
      </Button>
      <Button variant="outline">
        <Star className="size-4" />
        Favorite
      </Button>
      <Button variant="text">
        <Settings className="size-4" />
        Settings
      </Button>
      <Button aria-label="Like">
        <Heart className="size-4" />
      </Button>
    </div>
  );
}