diff --git a/components/Button.tsx b/components/Button.tsx index 70d4e1c..dc3361c 100644 --- a/components/Button.tsx +++ b/components/Button.tsx @@ -4,7 +4,13 @@ import React from "react"; const button = cva("button", { variants: { intent: { - primary: ["bg-blue-600/50", "border-blue-600", "hover:bg-blue-600/60", "focus:ring-blue-800", "border-blue-600"], + primary: [ + "bg-blue-600/50", + "border-blue-600", + "hover:bg-blue-600/60", + "focus:ring-blue-800", + "border-blue-600", + ], secondary: [ "bg-emerald-600/50", "border-emerald-600", @@ -19,6 +25,10 @@ const button = cva("button", { medium: ["font-medium", "py-2.5", "px-5", "sm:text-sm", "text-xs"], small: ["font-small", "py-2", "px-2"], }, + variant: { + filled: [], + outlined: ["bg-transparent", "hover:bg-opacity-10"], + }, compoundVariants: { intent: ["primary", "secondary"], size: "medium", @@ -26,15 +36,27 @@ const button = cva("button", { defaultVariants: { intent: "primary", size: "medium", + variant: "filled", }, }, }); -export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps {} +export interface ButtonProps + extends React.ButtonHTMLAttributes, + VariantProps {} -export const Button: React.FC = ({ intent, size, ...props }) => ( +export const Button: React.FC = ({ + intent, + size, + variant, + ...props +}) => (