40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import clsx from "clsx";
|
|
import Button, { ButtonProps } from "./Button";
|
|
|
|
|
|
export default function DangerButton(props: ButtonProps){
|
|
const {
|
|
variant = "solid"
|
|
} = props;
|
|
|
|
|
|
return (
|
|
<Button
|
|
{...props}
|
|
className={clsx(
|
|
props.className,
|
|
//Background
|
|
{
|
|
"bg-transparent": variant === "outline" || variant === "icon",
|
|
"bg-red-600 hover:bg-red-700 active:bg-red-800": variant === "solid",
|
|
"bg-transparent hover:bg-red-600 active:bg-red-700": variant === "ghost" || variant === "outline-ghost"
|
|
},
|
|
//Text
|
|
{
|
|
"text-white": variant === "solid",
|
|
"text-red-600 hover:text-red-700 active:text-red-800": variant === "outline" || variant === "icon",
|
|
"text-red-600 hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost"
|
|
},
|
|
//Outline
|
|
{
|
|
"outline-none": variant === "ghost" || variant === "icon",
|
|
"outline outline-red-600 hover:outline-red-700 active:outline-red-800": variant === "solid" || variant === "outline",
|
|
"outline hover:outline-red-600 active:outline-red-700": variant === "outline-ghost"
|
|
}
|
|
)}
|
|
>
|
|
{props.children}
|
|
</Button>
|
|
);
|
|
}
|