GitHub

Button

PreviousNext

Displays a button or a component that looks like a button.

Loading
Loading...
import { ArrowUpIcon } from "blode-icons-react";
import { Button } from "@/components/ui/button";
 
export function ButtonDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2 md:flex-row">
      <Button variant="outline">Button</Button>
      <Button aria-label="Submit" size="icon" variant="outline">
        <ArrowUpIcon />
      </Button>
    </div>
  );
}

Installation

npx shadcn@latest add "https://ui.blode.co/r/styles/default/button"

Usage

import { Button } from "@/components/ui/button";
<Button variant="secondary">Button</Button>

Link

You can use the buttonVariants helper to create a link that looks like a button.

import { buttonVariants } from "@/components/ui/button";
<Link className={buttonVariants({ variant: "destructive" })}>Click here</Link>

Alternatively, you can set the asChild parameter and nest the link component.

<Button asChild>
  <Link href="/login">Login</Link>
</Button>

Examples

Default

Loading
Loading...
import { Button } from "@/components/ui/button";
 
export function ButtonDefault() {
  return <Button>Button</Button>;
}

Secondary

Loading
Loading...
import { Button } from "@/components/ui/button";
 
export function ButtonSecondary() {
  return <Button variant="secondary">Secondary</Button>;
}

Destructive

Loading
Loading...
import { Button } from "@/components/ui/button";
 
export function ButtonDestructive() {
  return <Button variant="destructive">Destructive</Button>;
}

Ghost

Loading
Loading...
import { Button } from "@/components/ui/button";
 
export function ButtonGhost() {
  return <Button variant="ghost">Ghost</Button>;
}

Link

Loading
Loading...
import { Button } from "@/components/ui/button";
 
export function ButtonLink() {
  return <Button variant="link">Link</Button>;
}

Loading

Loading
Loading...
import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";
 
export function ButtonLoading() {
  return (
    <div className="flex gap-2">
      <Button disabled variant="outline">
        <Spinner data-icon="inline-start" />
        Generating
      </Button>
      <Button disabled variant="secondary">
        Downloading
        <Spinner data-icon="inline-start" />
      </Button>
    </div>
  );
}

As Child

Loading
Loading...
import Link from "next/link";
 
import { Button } from "@/components/ui/button";
 
export function ButtonAsChild() {
  return (
    <Button asChild>
      <Link href="/login">Login</Link>
    </Button>
  );
}