Button

import { Button } from "@/components/ui/button";

export default function Example() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button variant="primary">Order now</Button>
      <Button variant="secondary">Save for later</Button>
      <Button variant="soft">Gift wrap</Button>
      <Button variant="outline">View menu</Button>
      <Button variant="ghost">Skip</Button>
      <Button variant="destructive">Cancel order</Button>
      <Button variant="link">Track parcel</Button>
    </div>
  );
}

import { Button } from "@/components/ui/button";

export default function Example() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
    </div>
  );
}

import { ArrowRight, Plus } from "@/components/ui/icons";
import { Avatar } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";

export default function Example() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button leadingIcon={<Plus />}>Add to cart</Button>
      <Button variant="outline" trailingIcon={<ArrowRight />}>Checkout</Button>
      <Button variant="soft" badge={3}>Cart</Button>
      <Button variant="outline" avatar={<Avatar size="xs" initials="NJ" />}>Nusrat Jahan</Button>
    </div>
  );
}

import * as React from "react";
import { Button } from "@/components/ui/button";

export default function Example() {
  const [busy, setBusy] = React.useState(false);
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button loading={busy} onClick={() => { setBusy(true); setTimeout(() => setBusy(false), 1800); }}>{busy ? "Placing order" : "Place order"}</Button>
      <Button disabled>Out of stock</Button>
      <Button variant="outline" disabled>Sold out</Button>
    </div>
  );
}