Name: Cnippet UI
Author: Deepak Negi

Installation


pnpm dlx cnippet@latest add button

Usage

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

<Button>Button</Button>

Link

You can use the render prop to make another component look like a button. Here's an example of a link that looks like a button.

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

Variants

Default

Outline

Secondary

Destructive

Destructive outline

Ghost

W/ Link

Link

W/ Loading

import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";

export default function Particle() {
  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between gap-10 [&_p]:text-xs">
        <p>Default</p>
        <Button>Button</Button>
      </div>
      <div className="flex items-center justify-between gap-10 [&_p]:text-xs">
        <p>Outline</p>
        <Button variant="outline">Outline</Button>
      </div>
      <div className="flex items-center justify-between gap-10 [&_p]:text-xs">
        <p>Secondary</p>
        <Button variant="secondary">Secondary</Button>
      </div>
      <div className="flex items-center justify-between gap-10 [&_p]:text-xs">
        <p>Destructive</p>
        <Button variant="destructive">Delete</Button>
      </div>
      <div className="flex items-center justify-between gap-10 [&_p]:text-xs">
        <p>Destructive outline</p>
        <Button variant="destructive-outline">Delete</Button>
      </div>
      <div className="flex items-center justify-between gap-10 [&_p]:text-xs">
        <p>Ghost</p>
        <Button variant="ghost">Ghost</Button>
      </div>
      <div className="flex items-center justify-between gap-10 [&_p]:text-xs">
        <p>W/ Link</p>
        <Button render={<Link href="/" />}>Link</Button>
      </div>

      <div className="flex items-center justify-between gap-10 [&_p]:text-xs">
        <p>W/ Loading</p>
        <Button disabled>
          <Spinner />
          Loading...
        </Button>
      </div>
    </div>
  );
}

Sizes

Extra small

Small

Large

Extra Large

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

export default function Particle() {
  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between gap-10 [&_p]:text-xs">
        <p>Extra small</p>
        <Button size="xs">Button</Button>
      </div>
      <div className="flex items-center justify-between gap-10 [&_p]:text-xs">
        <p>Small</p>
        <Button size="sm">Button</Button>
      </div>
      <div className="flex items-center justify-between gap-10 [&_p]:text-xs">
        <p>Large</p>
        <Button size="lg">Button</Button>
      </div>
      <div className="flex items-center justify-between gap-10 [&_p]:text-xs">
        <p>Extra Large</p>
        <Button size="xl">Button</Button>
      </div>
    </div>
  );
}

Button

Installation

Usage

Link

Variants

Sizes

On this page