diff --git a/apps/web/components/Form.tsx b/apps/web/components/Form.tsx
index 982109a..e932e8e 100644
--- a/apps/web/components/Form.tsx
+++ b/apps/web/components/Form.tsx
@@ -41,8 +41,8 @@ export function Form({ data, metaData, title }: Props) {
-
-
+
+
);
diff --git a/packages/ui/button.tsx b/packages/ui/button.tsx
index 759c524..8954d82 100644
--- a/packages/ui/button.tsx
+++ b/packages/ui/button.tsx
@@ -8,12 +8,19 @@ const variants = cva(
'rounded-sm h-10 px-5 py-2.5 text-sm font-medium text-white transition-all ease-in-out',
{
defaultVariants: {
- color: 'default',
+ intent: 'default',
},
variants: {
- color: {
+ intent: {
danger: 'bg-danger hover:bg-danger-700',
default: 'bg-primary hover:bg-primary-700',
+ 'outline-danger':
+ 'bg-transparent text-danger border border-danger hover:bg-danger hover:text-white',
+ 'outline-default':
+ 'bg-transparent text-primary border border-primary hover:bg-primary hover:text-white',
+ 'outline-secondary':
+ 'opacity-70 bg-transparent text-primary border border-primary hover:bg-primary hover:text-white',
+ secondary: 'bg-primary-400 hover:bg-primary-700 hover:opacity-100',
},
},
}
@@ -22,7 +29,12 @@ const variants = cva(
export type ButtonProps = ButtonHTMLAttributes & VariantProps;
export const Button = forwardRef(
- ({ className, color, ...props }, ref) => (
-
+ ({ className, intent, type, ...props }, ref) => (
+
)
);