Button

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

Installation

You have two options when using CopyPasteUi:

1. Copy the Tailwind classes and use them in .html or .jsx components.
2. Use React to copy the entire component. This allows you to access loading states and other dynamic features, making the component more reusable and fully customizable.

Example

Preview

Example

HTML

<button class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-semibold cursor-pointer rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
  Example
</button>

JSX

<button className="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-semibold cursor-pointer rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
  Example
</button>

React

import React from "react"

interface ButtonProps {
onClick?: () => void
variant?: "solid" | "outline" | "ghost" | "soft" | "link"
radius?: "full" | "large" | "default" | "small" | "none"
size?: "default" | "small" | "large"
color?: "default" | "blue" | "green" | "cerise" | "yellow" | "violet"
disabled?: boolean
children?: string
className?: string
loading?: boolean
icon?: React.ReactNode
}

const ReactButton: React.FC<ButtonProps> = ({
className,
onClick,
variant = "solid",
size = "default",
disabled = false,
radius = "default",
children,
loading = false,
color = "default",
icon,
}) => {
// Clases de Tailwind para diferentes variantes de colores y tamaños
const buttonColors = {
default: "gray",
/\*_ VARIANTS
_ solid: bg-gray-600, hover:bg-gray-700
_ outline: border-gray-200 text-gray-500 hover:border-gray-600 hover:text-gray-600; dark:border-gray-700 dark:hover:text-gray-500 dark:hover:border-gray-600
_ ghost: text-gray-600 hover:bg-gray-100 hover:text-gray-800; dark:text-gray-500 dark:hover:bg-gray-800/30 dark:hover:text-gray-400
_ soft: bg-gray-100 text-gray-800 hover:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none dark:bg-white/10 dark:hover:bg-white/20 dark:text-white dark:hover:text-white
_ link: text-gray-800 hover:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-white/70
\*/

    blue: "blue",
    /** VARIANTS
    * solid: bg-blue-600, hover:bg-blue-700
    * outline: border-blue-200 text-blue-500 hover:border-blue-600 hover:text-blue-600 dark:border-blue-700 dark:hover:text-blue-500 dark:hover:border-blue-600
    * ghost: text-blue-600 hover:bg-blue-100 hover:text-blue-800; dark:text-blue-500 dark:hover:bg-blue-800/30 dark:hover:text-blue-400
    * soft: bg-blue-100 text-blue-800 hover:bg-blue-200 disabled:opacity-50 disabled:pointer-events-none dark:bg-white/10 dark:hover:bg-white/20 dark:text-white dark:hover:text-white
    * link: text-blue-800 hover:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-white/70
    */
    green: "green",
    /** VARIANTS
    * solid: bg-green-600, hover:bg-green-700
    * outline: border-green-200 text-green-500 hover:border-green-600 hover:text-green-600 dark:border-green-700 dark:hover:text-green-500 dark:hover:border-green-600
    * ghost: text-green-600 hover:bg-green-100 hover:text-green-800; dark:text-green-500 dark:hover:bg-green-800/30 dark:hover:text-green-400
    * soft: bg-green-100 text-green-800 hover:bg-green-200 disabled:opacity-50 disabled:pointer-events-none dark:bg-white/10 dark:hover:bg-white/20 dark:text-white dark:hover:text-white
    * link: text-green-800 hover:text-green-600 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-white/70
    */
    cerise: "red",
    /** VARIANTS
    * solid: bg-red-600, hover:bg-red-700
    * outline: border-red-200 text-red-500 hover:border-red-600 hover:text-red-600 dark:border-red-700 dark:hover:text-red-500 dark:hover:border-red-600
    * ghost: text-red-600 hover:bg-red-100 hover:text-red-800; dark:text-red-500 dark:hover:bg-red-800/30 dark:hover:text-red-400
    * soft: bg-red-100 text-red-800 hover:bg-red-200 disabled:opacity-50 disabled:pointer-events-none dark:bg-white/10 dark:hover:bg-white/20 dark:text-white dark:hover:text-white
    * link: text-red-800 hover:text-red-600 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-white/70
    */
    yellow: "yellow",
    /** VARIANTS
    * solid: bg-yellow-600, hover:bg-yellow-700
    * outline: border-yellow-200 text-yellow-500 hover:border-yellow-600 hover:text-yellow-600 dark:border-yellow-700 dark:hover:text-yellow-500 dark:hover:border-yellow-600
    * ghost: text-yellow-600 hover:bg-yellow-100 hover:text-yellow-800; dark:text-yellow-500 dark:hover:bg-yellow-800/30 dark:hover:text-yellow-400
    * soft: bg-yellow-100 text-yellow-800 hover:bg-yellow-200 disabled:opacity-50 disabled:pointer-events-none dark:bg-white/10 dark:hover:bg-white/20 dark:text-white dark:hover:text-white
    * link: text-yellow-800 hover:text-yellow-600 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-white/70
    */
    violet: "violet",
    /** VARIANTS
    * solid: bg-violet-600, hover:bg-violet-700
    * outline: border-violet-200 text-violet-500 hover:border-violet-600 hover:text-violet-600 dark:border-violet-700 dark:hover:text-violet-500 dark:hover:border-violet-600
    * ghost: text-violet-600 hover:bg-violet-100 hover:text-violet-800; dark:text-violet-500 dark:hover:bg-violet-800/30 dark:hover:text-violet-400
    * soft: bg-violet-100 text-violet-800 hover:bg-violet-200 disabled:opacity-50 disabled:pointer-events-none dark:bg-white/10 dark:hover:bg-white/20 dark:text-white dark:hover:text-white
    * link: text-violet-800 hover:text-violet-600 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:text-white/70
    */

}

const buttonSizes = {
default: "py-3 px-4",
small: "py-2 px-3",
large: "py-4 sm:px-5",
}
const buttonRadius = {
full: "rounded-full",
large: "rounded-lg",
default: "rounded-md",
small: "rounded-sm",
none: "rounded-none",
}
const buttonVariants = {
solid: `${buttonSizes[size]} ${buttonRadius[radius]} cursor-pointer inline-flex items-center gap-x-2 text-sm font-semibold border border-transparent bg-${buttonColors[color]}-600 text-white hover:bg-${buttonColors[color]}-700 disabled:opacity-50 disabled:pointer-events-none`,
outline: `${buttonSizes[size]} inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold ${buttonRadius[radius]} border border-${buttonColors[color]}-200 text-${buttonColors[color]}-500 hover:border-${buttonColors[color]}-600 hover:text-${buttonColors[color]}-600 disabled:opacity-50 disabled:pointer-events-none dark:border-${buttonColors[color]}-700 dark:text-${buttonColors[color]}-400 dark:hover:text-${buttonColors[color]}-500 dark:hover:border-${buttonColors[color]}-600`,
ghost: `${buttonSizes[size]} inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold ${buttonRadius[radius]} border border-transparent text-${buttonColors[color]}-600 hover:bg-${buttonColors[color]}-100 hover:text-${buttonColors[color]}-800 disabled:opacity-50 disabled:pointer-events-none dark:text-${buttonColors[color]}-500 dark:hover:bg-${buttonColors[color]}-800/30 dark:hover:text-${buttonColors[color]}-400`,
soft: `${buttonSizes[size]} inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold ${buttonRadius[radius]} border border-transparent bg-${buttonColors[color]}-100 text-${buttonColors[color]}-800 hover:bg-${buttonColors[color]}-200 disabled:opacity-50 disabled:pointer-events-none dark:hover:bg-${buttonColors[color]}-900 dark:text-${buttonColors[color]}-400`,
light: `${buttonSizes[size]} inline-flex items-center cursor-pointer gap-x-2 text-sm font-medium ${buttonRadius[radius]} border border-${buttonColors[color]}-200 bg-white text-${buttonColors[color]}-800 shadow-sm hover:bg-${buttonColors[color]}-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-800`,
link: `${buttonSizes[size]} inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold ${buttonRadius[radius]} border border-transparent text-${buttonColors[color]}-600 hover:text-${buttonColors[color]}-800 disabled:opacity-50 disabled:pointer-events-none dark:text-${buttonColors[color]}-500 dark:hover:text-${buttonColors[color]}-400`,
}

return (
<button
onClick={onClick}
className={`${buttonVariants[variant]} ${
        loading && "cursor-not-allowed"
    } ${className}`}
disabled={disabled || loading} >
{loading ? (
<svg
        className="animate-spin h-5 w-5 text-white"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        >
<circle
            className="opacity-25"
            cx="12"
            cy="12"
            r="10"
            stroke="currentColor"
            strokeWidth="4"
        ></circle>
<path
            className="opacity-75"
            fill="currentColor"
            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
        ></path>
</svg>
) : (
<>
{icon && <span className="mr-2">{icon}</span>}
{children}
</>
)}
</button>
)
}

export default ReactButton

Size

Preview

Small

Default

Large

HTML

<button class="py-2 px-3 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
  Small
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
  Default
</button>
<button class="py-4 sm:px-5 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
  Large
</button>

JSX

<button className="py-2 px-3 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
  Small
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
  Default
</button>
<button className="py-4 sm:px-5 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
  Large
</button>

React

<Button size="small">
  Small
</Button>
<Button size="default">
  Default
</Button>
<Button size="large">
  Large
</Button>

Radius

Preview

Full

Large

Default

Small

None

HTML

<button class="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-full border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
  Full
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
  Large
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-md border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
  Default
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-sm border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
  Small
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
  None
</button>

JSX

<button className="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-full border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
  Full
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
  Large
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-md border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
  Default
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-sm border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
  Small
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
  None
</button>

React

<Button radius="full">Full</Button>
<Button size="large">Large</Button>
<Button size="default">Default</Button>
<Button size="small">Small</Button>
<Button size="none">None</Button>

Variants

Example

Solid

Outline

Ghost

Soft

Link

HTML

<button class="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
  Solid
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border bg-transparent border-gray-200 text-gray-500 hover:border-blue-600 hover:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:border-blue-700 dark:text-blue-400 dark:hover:text-blue-500 dark:hover:border-blue-600">
  Outline
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-transparent text-blue-600 hover:bg-blue-100 hover:text-blue-800 disabled:opacity-50 disabled:pointer-events-none dark:text-blue-500 dark:hover:bg-blue-800/30 dark:hover:text-blue-400">
  Ghost
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-100 text-blue-800 hover:bg-blue-200 disabled:opacity-50 disabled:pointer-events-none dark:hover:bg-blue-900 dark:text-blue-400">
  Soft
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-transparent text-blue-600 hover:text-blue-800 disabled:opacity-50 disabled:pointer-events-none dark:text-blue-500 dark:hover:text-blue-400">
  Link
</button>

JSX

<button className="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
  Solid
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border bg-transparent border-gray-200 text-gray-500 hover:border-blue-600 hover:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:border-blue-700 dark:text-blue-400 dark:hover:text-blue-500 dark:hover:border-blue-600">
  Outline
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-transparent text-blue-600 hover:bg-blue-100 hover:text-blue-800 disabled:opacity-50 disabled:pointer-events-none dark:text-blue-500 dark:hover:bg-blue-800/30 dark:hover:text-blue-400">
  Ghost
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-100 text-blue-800 hover:bg-blue-200 disabled:opacity-50 disabled:pointer-events-none dark:hover:bg-blue-900 dark:text-blue-400">
  Soft
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-transparent text-blue-600 hover:text-blue-800 disabled:opacity-50 disabled:pointer-events-none dark:text-blue-500 dark:hover:text-blue-400">
  Link
</button>

React

<Button variant="solid">Solid</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="soft">Soft</Button>
<Button variant="link">Link</Button>

Colors

Solid

Example

Default

Blue

Yellow

Cerise

Green

Violet

HTML

<button class="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-gray-600 text-white hover:bg-gray-700 disabled:opacity-50 disabled:pointer-events-none">
  Default
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
  Blue
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-yellow-600 text-white hover:bg-yellow-700 disabled:opacity-50 disabled:pointer-events-none">
  Yellow
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-red-600 text-white hover:bg-red-700 disabled:opacity-50 disabled:pointer-events-none">
  Cerise
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-green-600 text-white hover:bg-green-700 disabled:opacity-50 disabled:pointer-events-none">
  Green
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-violet-600 text-white hover:bg-violet-700 disabled:opacity-50 disabled:pointer-events-none">
  Violet
</button>

JSX

<button className="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-gray-600 text-white hover:bg-gray-700 disabled:opacity-50 disabled:pointer-events-none">
  Default
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
  Blue
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-yellow-600 text-white hover:bg-yellow-700 disabled:opacity-50 disabled:pointer-events-none">
  Yellow
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-red-600 text-white hover:bg-red-700 disabled:opacity-50 disabled:pointer-events-none">
  Cerise
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-green-600 text-white hover:bg-green-700 disabled:opacity-50 disabled:pointer-events-none">
  Green
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-violet-600 text-white hover:bg-violet-700 disabled:opacity-50 disabled:pointer-events-none">
  Violet
</button>

React

<Button variant="solid" color="default">
  Default
</Button>
<Button variant="solid" color="blue">
  Blue
</Button>
<Button variant="solid" color="yellow">
  Yellow
</Button>
<Button variant="solid" color="cerise">
  Cerise
</Button>
<Button variant="solid" color="green">
  Green
</Button>
<Button variant="solid" color="violet">
  Violet
</Button>

Outline

Example

Default

Blue

Yellow

Cerise

Green

Violet

HTML

<button class="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-gray-200 text-gray-500 hover:border-gray-600 hover:text-gray-600 disabled:opacity-50 disabled:pointer-events-none dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-500 dark:hover:border-gray-600">
  Default
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-blue-200 text-blue-500 hover:border-blue-600 hover:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:border-blue-700 dark:text-blue-400 dark:hover:text-blue-500 dark:hover:border-blue-600">
  Blue
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-yellow-200 text-yellow-500 hover:border-yellow-600 hover:text-yellow-600 disabled:opacity-50 disabled:pointer-events-none dark:border-yellow-700 dark:text-yellow-400 dark:hover:text-yellow-500 dark:hover:border-yellow-600">
  Yellow
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-red-200 text-red-500 hover:border-red-600 hover:text-red-600 disabled:opacity-50 disabled:pointer-events-none dark:border-red-700 dark:text-red-400 dark:hover:text-red-500 dark:hover:border-red-600">
  Cerise
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-green-200 text-green-500 hover:border-green-600 hover:text-green-600 disabled:opacity-50 disabled:pointer-events-none dark:border-green-700 dark:text-green-400 dark:hover:text-green-500 dark:hover:border-green-600">
  Green
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-violet-200 text-violet-500 hover:border-violet-600 hover:text-violet-600 disabled:opacity-50 disabled:pointer-events-none dark:border-violet-700 dark:text-violet-400 dark:hover:text-violet-500 dark:hover:border-violet-600">
  Violet
</button>

JSX

<button className="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-gray-200 text-gray-500 hover:border-gray-600 hover:text-gray-600 disabled:opacity-50 disabled:pointer-events-none dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-500 dark:hover:border-gray-600">
  Default
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-blue-200 text-blue-500 hover:border-blue-600 hover:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:border-blue-700 dark:text-blue-400 dark:hover:text-blue-500 dark:hover:border-blue-600">
  Blue
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-yellow-200 text-yellow-500 hover:border-yellow-600 hover:text-yellow-600 disabled:opacity-50 disabled:pointer-events-none dark:border-yellow-700 dark:text-yellow-400 dark:hover:text-yellow-500 dark:hover:border-yellow-600">
  Yellow
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-red-200 text-red-500 hover:border-red-600 hover:text-red-600 disabled:opacity-50 disabled:pointer-events-none dark:border-red-700 dark:text-red-400 dark:hover:text-red-500 dark:hover:border-red-600">
  Cerise
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-green-200 text-green-500 hover:border-green-600 hover:text-green-600 disabled:opacity-50 disabled:pointer-events-none dark:border-green-700 dark:text-green-400 dark:hover:text-green-500 dark:hover:border-green-600">
  Green
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-violet-200 text-violet-500 hover:border-violet-600 hover:text-violet-600 disabled:opacity-50 disabled:pointer-events-none dark:border-violet-700 dark:text-violet-400 dark:hover:text-violet-500 dark:hover:border-violet-600">
  Violet
</button>

React

<Button variant="outline" color="default">
  Default
</Button>
<Button variant="outline" color="blue">
  Blue
</Button>
<Button variant="outline" color="yellow">
  Yellow
</Button>
<Button variant="outline" color="cerise">
  Cerise
</Button>
<Button variant="outline" color="green">
  Green
</Button>
<Button variant="outline" color="violet">
  Violet
</Button>

Ghost

Example

Default

Blue

Yellow

Cerise

Green

Violet

HTML

<button class="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-gray-600 hover:bg-gray-100 hover:text-gray-800 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-500 dark:hover:bg-gray-800/30 dark:hover:text-gray-400">
  Default
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-blue-600 hover:bg-blue-100 hover:text-blue-800 disabled:opacity-50 disabled:pointer-events-none dark:text-blue-500 dark:hover:bg-blue-800/30 dark:hover:text-blue-400">
  Blue
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-yellow-600 hover:bg-yellow-100 hover:text-yellow-800 disabled:opacity-50 disabled:pointer-events-none dark:text-yellow-500 dark:hover:bg-yellow-800/30 dark:hover:text-yellow-400">
  Yellow
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-red-600 hover:bg-red-100 hover:text-red-800 disabled:opacity-50 disabled:pointer-events-none dark:text-red-500 dark:hover:bg-red-800/30 dark:hover:text-red-400">
  Cerise
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-green-600 hover:bg-green-100 hover:text-green-800 disabled:opacity-50 disabled:pointer-events-none dark:text-green-500 dark:hover:bg-green-800/30 dark:hover:text-green-400">
  Green
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-violet-600 hover:bg-violet-100 hover:text-violet-800 disabled:opacity-50 disabled:pointer-events-none dark:text-violet-500 dark:hover:bg-violet-800/30 dark:hover:text-violet-400">
  Violet
</button>

JSX

<button className="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-gray-600 hover:bg-gray-100 hover:text-gray-800 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-500 dark:hover:bg-gray-800/30 dark:hover:text-gray-400">
  Default
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-blue-600 hover:bg-blue-100 hover:text-blue-800 disabled:opacity-50 disabled:pointer-events-none dark:text-blue-500 dark:hover:bg-blue-800/30 dark:hover:text-blue-400">
  Blue
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-yellow-600 hover:bg-yellow-100 hover:text-yellow-800 disabled:opacity-50 disabled:pointer-events-none dark:text-yellow-500 dark:hover:bg-yellow-800/30 dark:hover:text-yellow-400">
  Yellow
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-red-600 hover:bg-red-100 hover:text-red-800 disabled:opacity-50 disabled:pointer-events-none dark:text-red-500 dark:hover:bg-red-800/30 dark:hover:text-red-400">
  Cerise
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-green-600 hover:bg-green-100 hover:text-green-800 disabled:opacity-50 disabled:pointer-events-none dark:text-green-500 dark:hover:bg-green-800/30 dark:hover:text-green-400">
  Green
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-violet-600 hover:bg-violet-100 hover:text-violet-800 disabled:opacity-50 disabled:pointer-events-none dark:text-violet-500 dark:hover:bg-violet-800/30 dark:hover:text-violet-400">
  Violet
</button>

React

<Button variant="ghost" color="default">
  Default
</Button>
<Button variant="ghost" color="blue">
  Blue
</Button>
<Button variant="ghost" color="yellow">
  Yellow
</Button>
<Button variant="ghost" color="cerise">
  Cerise
</Button>
<Button variant="ghost" color="green">
  Green
</Button>
<Button variant="ghost" color="violet">
  Violet
</Button>

Soft

Example

Default

Blue

Yellow

Cerise

Green

Violet

HTML

<button class="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-gray-100 text-gray-800 hover:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none dark:hover:bg-gray-900 dark:text-gray-400">
  Default
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-100 text-blue-800 hover:bg-blue-200 disabled:opacity-50 disabled:pointer-events-none dark:hover:bg-blue-900 dark:text-blue-400">
  Blue
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-yellow-100 text-yellow-800 hover:bg-yellow-200 disabled:opacity-50 disabled:pointer-events-none dark:hover:bg-yellow-900 dark:text-yellow-400">
  Yellow
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-red-100 text-red-800 hover:bg-red-200 disabled:opacity-50 disabled:pointer-events-none dark:hover:bg-red-900 dark:text-red-400">
  Cerise
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-green-100 text-green-800 hover:bg-green-200 disabled:opacity-50 disabled:pointer-events-none dark:hover:bg-green-900 dark:text-green-400">
  Green
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-violet-100 text-violet-800 hover:bg-violet-200 disabled:opacity-50 disabled:pointer-events-none dark:hover:bg-violet-900 dark:text-violet-400">
  Violet
</button>

JSX

<button className="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-gray-100 text-gray-800 hover:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none dark:hover:bg-gray-900 dark:text-gray-400">
  Default
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-100 text-blue-800 hover:bg-blue-200 disabled:opacity-50 disabled:pointer-events-none dark:hover:bg-blue-900 dark:text-blue-400">
  Blue
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-yellow-100 text-yellow-800 hover:bg-yellow-200 disabled:opacity-50 disabled:pointer-events-none dark:hover:bg-yellow-900 dark:text-yellow-400">
  Yellow
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-red-100 text-red-800 hover:bg-red-200 disabled:opacity-50 disabled:pointer-events-none dark:hover:bg-red-900 dark:text-red-400">
  Cerise
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-green-100 text-green-800 hover:bg-green-200 disabled:opacity-50 disabled:pointer-events-none dark:hover:bg-green-900 dark:text-green-400">
  Green
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-violet-100 text-violet-800 hover:bg-violet-200 disabled:opacity-50 disabled:pointer-events-none dark:hover:bg-violet-900 dark:text-violet-400">
  Violet
</button>

React

<Button variant="soft" color="default">
  Default
</Button>
<Button variant="soft" color="blue">
  Blue
</Button>
<Button variant="soft" color="yellow">
  Yellow
</Button>
<Button variant="soft" color="cerise">
  Cerise
</Button>
<Button variant="soft" color="green">
  Green
</Button>
<Button variant="soft" color="violet">
  Violet
</Button>

Link

Example

Default

Blue

Yellow

Cerise

Green

Violet

HTML

<button class="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-gray-600 hover:text-gray-800 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-500 dark:hover:text-gray-400">
  Default
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-blue-600 hover:text-blue-800 disabled:opacity-50 disabled:pointer-events-none dark:text-blue-500 dark:hover:text-blue-400">
  Blue
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-yellow-600 hover:text-yellow-800 disabled:opacity-50 disabled:pointer-events-none dark:text-yellow-500 dark:hover:text-yellow-400">
  Yellow
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-red-600 hover:text-red-800 disabled:opacity-50 disabled:pointer-events-none dark:text-red-500 dark:hover:text-red-400">
  Cerise
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-green-600 hover:text-green-800 disabled:opacity-50 disabled:pointer-events-none dark:text-green-500 dark:hover:text-green-400">
  Green
</button>
<button class="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-violet-600 hover:text-violet-800 disabled:opacity-50 disabled:pointer-events-none dark:text-violet-500 dark:hover:text-violet-400">
  Violet
</button>

JSX

<button className="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-gray-600 hover:text-gray-800 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-500 dark:hover:text-gray-400">
  Default
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-blue-600 hover:text-blue-800 disabled:opacity-50 disabled:pointer-events-none dark:text-blue-500 dark:hover:text-blue-400">
  Blue
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-yellow-600 hover:text-yellow-800 disabled:opacity-50 disabled:pointer-events-none dark:text-yellow-500 dark:hover:text-yellow-400">
  Yellow
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-red-600 hover:text-red-800 disabled:opacity-50 disabled:pointer-events-none dark:text-red-500 dark:hover:text-red-400">
  Cerise
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-green-600 hover:text-green-800 disabled:opacity-50 disabled:pointer-events-none dark:text-green-500 dark:hover:text-green-400">
  Green
</button>
<button className="py-3 px-4 inline-flex items-center cursor-pointer bg-transparent gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-violet-600 hover:text-violet-800 disabled:opacity-50 disabled:pointer-events-none dark:text-violet-500 dark:hover:text-violet-400">
  Violet
</button>

React

<Button variant="link" color="default">
  Default
</Button>
<Button variant="link" color="blue">
  Blue
</Button>
<Button variant="link" color="yellow">
  Yellow
</Button>
<Button variant="link" color="cerise">
  Cerise
</Button>
<Button variant="link" color="green">
  Green
</Button>
<Button variant="link" color="violet">
  Violet
</Button>

Loading

Preview

React

<ReactBtn color="blue" loading>
  Loading...
</ReactBtn>

Important

This state can only be used with React component, because its built in react.

API

This is only for the React version.

Button props

Attribute	Type	Description	Default
children	children	The content to display in the button	-
variant	solid, outline, ghost, soft, link	Button appereance style	solid
color	default, blue, cerise, yellow, green, violet	Button color style	default
size	small, default, large	Button size	default
radio	none, small, default, large full	Button border radius style	default
loading	loading	Loading state	-
onClick	MouseEventHandler	Native button event handler	-