From d6dcec01a0311dfb3f5ae0e06e8982c5a912fb27 Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Mon, 27 Oct 2025 11:42:34 +0800
Subject: [PATCH] Added icon for button

---
 src/components/Button/Button.tsx | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 0bb57ef..85b2826 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,6 +1,7 @@
 import './Button.sass'
-import { Show, Switch, Match } from 'solid-js'
+import { Show, Switch, Match, type JSXElement } from 'solid-js'
 import { A } from '@solidjs/router'
+import { Row } from '../index'
 
 interface Props {
   label?: string
@@ -12,6 +13,7 @@ interface Props {
   newtab?: boolean
   width?: number
   wide?: boolean
+  icon?: (props: { size?: number }) => JSXElement
 }
 
 const getBorderRadius = (edge: Props['edges']) => {
@@ -29,7 +31,7 @@ const getBorderRadius = (edge: Props['edges']) => {
 
 export default (props: Props) => {
   const borderRadius = getBorderRadius(props.edges)
-
+  const Icon = props.icon
   return (
     <>
       <Show when={props.to}>
@@ -37,6 +39,9 @@ export default (props: Props) => {
           <Match when={props.design}>
             <A href={props.to!} aria-label={props.label} target={props.newtab ? '_blank' : ''}>
               <button class={props.design} style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
+                <Show when={props.icon}>
+                  <span>{Icon && <Icon size={24} />}</span>
+                </Show>
                 {props.label || 'Click Me!'}
               </button>
             </A>
@@ -44,6 +49,9 @@ export default (props: Props) => {
           <Match when={!props.design}>
             <A href={props.to!} aria-label={props.label} target={props.newtab ? '_blank' : ''}>
               <button class="button" style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
+                <Show when={props.icon}>
+                  <span>{Icon && <Icon size={24} />}</span>
+                </Show>
                 {props.label || 'Click Me!'}
               </button>
             </A>
@@ -56,25 +64,39 @@ export default (props: Props) => {
           <Match when={props.design}>
             <Show when={props.submit}>
               <button class={props.design} type="submit" style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
+                <Show when={props.icon}>
+                  <span>{Icon && <Icon size={24} />}</span>
+                </Show>
                 {props.label || 'Click Me!'}
               </button>
             </Show>
 
             <Show when={!props.submit}>
               <button class={props.design} onClick={props.onClick} style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
-                {props.label || 'Click Me!'}
+                <Row gap={0.5}>
+                  <Show when={props.icon}>
+                    <span>{Icon && <Icon size={24} />}</span>
+                  </Show>
+                  {props.label || 'Click Me!'}
+                </Row>
               </button>
             </Show>
           </Match>
           <Match when={!props.design}>
             <Show when={props.submit}>
               <button class="button" type="submit" style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
+                <Show when={props.icon}>
+                  <span>{Icon && <Icon size={24} />}</span>
+                </Show>
                 {props.label || 'Click Me!'}
               </button>
             </Show>
 
             <Show when={!props.submit}>
               <button class="button" onClick={props.onClick} style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
+                <Show when={props.icon}>
+                  <span>{Icon && <Icon size={24} />}</span>
+                </Show>
                 {props.label || 'Click Me!'}
               </button>
             </Show>