Added buttons

src/components/button/DangerButton.tsx

@@ -0,0 +1,39 @@
+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>
+	);
+}