fix: add intents for buttons

components/TempDesignSystem/Button/button.module.css

@@ -23,4 +23,53 @@
 
 .icon {
   font-size: 1.8rem;
+  align-items: baseline;
+}
+
+/* Primary styles */
+.primary {
+  background-color: var(--some-grey-color, #444343);
+  border: 2px solid transparent;
+  outline: 1px solid transparent;
+  border-radius: 46px;
+  padding: 6px 12px;
+}
+
+.primary:hover {
+  background: var(--some-grey-color, #444343);
+}
+
+.primary:active,
+.primary:focus {
+  border: var(--some-grey-color, #444343);
+  outline: var(--some-grey-color, #444343);
+}
+
+/* Secondary styles */
+.secondary {
+  border: 1px solid var(--some-grey-color, #444343);
+  background-color: transparent;
+  color: var(--some-grey-color, #444343);
+  border-radius: 46px;
+  padding: 6px 12px;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+}
+
+.secondary:hover {
+  border: 1px solid var(--some-grey-color, #444343);
+}
+
+.secondary:active,
+.secondary:focus {
+  border: 1px solid var(--some-grey-color, #444343);
+}
+
+/* Disabled styles */
+.btn:disabled {
+  border: 1px solid var(--some-grey-color, #444343);
+  background-color: transparent;
+  color: var(--some-grey-color, #444343);
+  cursor: not-allowed;
 }

components/TempDesignSystem/Button/index.tsx

@@ -10,8 +10,14 @@ export default function Button({
   asChild = false,
   className,
   variant,
+  intent,
   ...props
 }: ButtonProps) {
   const Comp = asChild ? Slot : "button"
-  return <Comp className={buttonVariants({ className, variant })} {...props} />
+  return (
+    <Comp
+      className={buttonVariants({ className, variant, intent })}
+      {...props}
+    />
+  )
 }

components/TempDesignSystem/Button/variants.ts

@@ -8,6 +8,10 @@ export const buttonVariants = cva(styles.btn, {
       default: styles.default,
       icon: styles.icon,
     },
+    intent: {
+      primary: styles.primary,
+      secondary: styles.secondary,
+    },
   },
   defaultVariants: {
     variant: "default",