Button

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

export default function Component() {
  return <Button>Button</Button>;
}

import { Button } from "@/components/ui/button";
import { LoaderCircleIcon } from "lucide-react";

export default function Component() {
  return (
    <Button disabled>
      <LoaderCircleIcon className="animate-spin" size={16} aria-hidden="true" />
      Please wait..
    </Button>
  );
}

import { BellIcon } from "lucide-react";

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

export default function Component() {
  return (
    <Button size="icon" variant="outline" className="relative rounded-full">
      <BellIcon />
      <Badge className="absolute -top-2 left-full min-w-5 -translate-x-1/2 px-1 text-[10px]">
        20
      </Badge>
    </Button>
  );
}

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

export default function Component() {
  return (
    <Button variant="outline" className="relative">
      Notifications
      <Badge className="absolute -top-2 left-full min-w-5 -translate-x-1/2 px-1 text-[10px]">
        20
      </Badge>
    </Button>
  );
}

import { Button } from "@/components/ui/button";
import { PlusCircleIcon } from "lucide-react";

export default function Component() {
  return (
    <Button variant="outline">
      <PlusCircleIcon />
      Create Product
    </Button>
  );
}

import { Button } from "@/components/ui/button";
import { ArrowRightIcon } from "lucide-react";

export default function Component() {
  return (
    <Button variant="link">
      Read more
      <ArrowRightIcon />
    </Button>
  );
}

import { Button } from "@/components/ui/button";
import { ChevronLeftIcon } from "lucide-react";

export default function Component() {
  return (
    <Button variant="outline" size="icon">
      <ChevronLeftIcon />
    </Button>
  );
}

import { Button } from "@/components/ui/button";
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";

export default function Component() {
  return (
    <div className="flex gap-2">
      <Button variant="outline" size="icon">
        <ChevronLeftIcon />
      </Button>
      <Button variant="outline" size="icon">
        <ChevronRightIcon />
      </Button>
    </div>
  );
}

import { Button } from "@/components/ui/button";
import { Trash2Icon } from "lucide-react";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";

export default function Component() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="destructive" size="icon">
            <Trash2Icon />
          </Button>
        </TooltipTrigger>
        <TooltipContent>
          <div>Delete</div>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

import { Button } from "@/components/ui/button";
import { Trash2Icon } from "lucide-react";

export default function Component() {
  return (
    <Button variant="destructive">
      <Trash2Icon />
      Remove
    </Button>
  );
}

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";

export default function Component() {
  return (
    <ToggleGroup variant="outline" type="multiple">
      <ToggleGroupItem value="bold" aria-label="Toggle bold">
        <BoldIcon />
      </ToggleGroupItem>
      <ToggleGroupItem value="italic" aria-label="Toggle italic">
        <ItalicIcon />
      </ToggleGroupItem>
      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
        <UnderlineIcon />
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

"use client";

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

export default function Component() {
  return (
    <ToggleGroup type="single" variant="outline">
      <ToggleGroupItem className="flex-1 px-4" value="left">
        Left
      </ToggleGroupItem>
      <ToggleGroupItem className="flex-1 px-4" value="center">
        Center
      </ToggleGroupItem>
      <ToggleGroupItem className="flex-1 px-4" value="right">
        Right
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

import { ThumbsUpIcon } from "lucide-react";

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

export default function Component() {
  return (
    <Button className="py-0 pe-0!" variant="outline">
      <ThumbsUpIcon className="opacity-60" size={16} aria-hidden="true" />
      Like
      <span className="text-muted-foreground before:bg-input relative ms-1 inline-flex h-full items-center justify-center rounded-full px-3 text-xs font-medium before:absolute before:inset-0 before:left-0 before:w-px">
        86
      </span>
    </Button>
  );
}

"use client";

import { useState } from "react";
import { LoaderCircleIcon } from "lucide-react";

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

export default function Component() {
  const [isLoading, setIsLoading] = useState<boolean>(false);

  const handleClick = () => {
    setIsLoading(true);
    setTimeout(() => {
      setIsLoading(false);
    }, 1000);
  };

  return (
    <Button
      onClick={handleClick}
      disabled={isLoading}
      data-loading={isLoading || undefined}
      className="group relative">
      <span className="group-data-loading:text-transparent">Click me</span>
      {isLoading && (
        <div className="absolute inset-0 flex items-center justify-center">
          <LoaderCircleIcon className="animate-spin" size={16} aria-hidden="true" />
        </div>
      )}
    </Button>
  );
}

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { ChevronDownIcon } from "lucide-react";
import { Button } from "@/components/ui/button";

export default function Component() {
  return (
    <Button variant="ghost" className="rounded-full p-0! pe-3!">
      <Avatar>
        <AvatarImage src="https://bundui-images.netlify.app/avatars/01.png" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <ChevronDownIcon />
    </Button>
  );
}

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";

export default function Component() {
  return (
    <Button variant="outline" className="rounded-full p-0! pe-3!">
      <Avatar>
        <AvatarImage src="https://bundui-images.netlify.app/avatars/07.png" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <span>Toby Belhome</span>
    </Button>
  );
}