Button

Example

Installation

Install the following dependencies:

terminal

npm install class-variance-authority
npm install @radix-ui/react-slot

npm install class-variance-authoritynpm install @radix-ui/react-slot

Create a `button.tsx` file and paste the following code into it.

/components/ui/button.tsx usage

import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/lib/utils";

const buttonVariants = cva(
  "h-fit inline-flex rounded-button border cursor-pointer items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all hover:shadow-[0px_2px_5px_0px_#40445214,0px_0px_0px_4px_#4362835C,0px_0px_0px_1px_#40445229,0px_1px_1px_0px_#0000001F] focus-visible:shadow-[0px_1px_1px_0px_#0000001F,0px_2px_5px_0px_#3C425714,0px_3px_9px_0px_#3C425714] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
  {
    variants: {
      variant: {
        primary: "bg-surface text-surface-foreground  border-border-neutral",
        secondary: "bg-brand text-primary-foreground border-brand",
        destructive: "bg-destructive text-white border-destructive",
        ghost:
          "bg-transparent text-foreground border-transparent hover:bg-accent hover:text-accent-foreground",
      },
      size: {
        sm: "px-2 py-1 gap-1.5 px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
        md: "px-2 py-1 gap-1.5 px-3 has-[>svg]:px-2.5",
        lg: "px-4 py-2 gap-2 px-6 has-[>svg]:px-4",
      },
    },
    defaultVariants: {
      variant: "primary",
      size: "sm",
    },
  },
);

function Button({
  className,
  variant = "primary",
  size = "md",
  asChild = false,
  ...props
}: React.ComponentProps<"button"> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean;
  }) {
  const Comp = asChild ? Slot : "button";

  return (
    <Comp
      data-slot="button"
      data-variant={variant}
      data-size={size}
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  );
}

export { Button, buttonVariants };

import * as React from "react";import { Slot } from "@radix-ui/react-slot";import { cva, type VariantProps } from "class-variance-authority";import { cn } from "@/lib/utils";const buttonVariants = cva(  "h-fit inline-flex rounded-button border cursor-pointer items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all hover:shadow-[0px_2px_5px_0px_#40445214,0px_0px_0px_4px_#4362835C,0px_0px_0px_1px_#40445229,0px_1px_1px_0px_#0000001F] focus-visible:shadow-[0px_1px_1px_0px_#0000001F,0px_2px_5px_0px_#3C425714,0px_3px_9px_0px_#3C425714] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        primary: "bg-surface text-surface-foreground  border-border-neutral",        secondary: "bg-brand text-primary-foreground border-brand",        destructive: "bg-destructive text-white border-destructive",        ghost:          "bg-transparent text-foreground border-transparent hover:bg-accent hover:text-accent-foreground",      },      size: {        sm: "px-2 py-1 gap-1.5 px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",        md: "px-2 py-1 gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "px-4 py-2 gap-2 px-6 has-[>svg]:px-4",      },    },    defaultVariants: {      variant: "primary",      size: "sm",    },  },);function Button({  className,  variant = "primary",  size = "md",  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean;  }) {  const Comp = asChild ? Slot : "button";  return (    <Comp      data-slot="button"      data-variant={variant}      data-size={size}      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  );}export { Button, buttonVariants };

Check the import paths to ensure they match your project setup.

Usage

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

<Button variant="primary | secondary | destructive" size="sm | md | lg">
  Button
</Button>

Variants

The button has 3 variants and 3 sizes. Each variant is shown below with all sizes (left to right) and the default, disabled, hover, and focus states.

Primary

Secondary

Destructive

Examples

With Icons

Buttons handle inline icons automatically. The icon spacing is managed by the built-in gap styles.

Loading

You can render a spinner icon to represent a loading state.

API Reference

Button

The Button component displays a button or a component that looks like a button.

disabledboolean

Default: -

type"button" | "submit" | "reset"

Default: -

size"sm" | "lg" | "md" | null

Default: md

variant"secondary" | "destructive" | "ghost" | "primary" | null

Default: primary

asChildboolean

Default: false

Prop	Type	Default	Description
disabled	boolean	-	-
type	"button" \| "submit" \| "reset"	-	-
size	"sm" \| "lg" \| "md" \| null	md	-
variant	"secondary" \| "destructive" \| "ghost" \| "primary" \| null	primary	-
asChild	boolean	false	-

Button

Install the following dependencies:

Create a button.tsx file and paste the following code into it.

Check the import paths to ensure they match your project setup.

On this page

Create a `button.tsx` file and paste the following code into it.