From f91e94952d873a2e3cdd0cd8c775a0d0f06f1dc7 Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Fri, 26 Sep 2025 17:32:40 +0800
Subject: [PATCH] Added width option on button component

---
 src/components/Button/Button.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 9282a48..0bb57ef 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -10,6 +10,8 @@ interface Props {
   design?: 'bu-primary' | 'bu-link' | 'bu-info' | 'bu-success' | 'bu-warning' | 'bu-danger' | 'bu-dark' | 'bu-light' | 'bu-text' | 'bu-ghost' | 'bo-primary' | 'bo-secondary' | 'bo-success' | 'bo-danger' | 'bo-warning' | 'bo-info' | 'bo-light' | 'bo-dark' | 'bo-link'
   submit?: boolean
   newtab?: boolean
+  width?: number
+  wide?: boolean
 }
 
 const getBorderRadius = (edge: Props['edges']) => {
@@ -34,14 +36,14 @@ export default (props: Props) => {
         <Switch>
           <Match when={props.design}>
             <A href={props.to!} aria-label={props.label} target={props.newtab ? '_blank' : ''}>
-              <button class={props.design} style={borderRadius}>
+              <button class={props.design} style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
                 {props.label || 'Click Me!'}
               </button>
             </A>
           </Match>
           <Match when={!props.design}>
             <A href={props.to!} aria-label={props.label} target={props.newtab ? '_blank' : ''}>
-              <button class="button" style={borderRadius}>
+              <button class="button" style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
                 {props.label || 'Click Me!'}
               </button>
             </A>
@@ -53,26 +55,26 @@ export default (props: Props) => {
         <Switch>
           <Match when={props.design}>
             <Show when={props.submit}>
-              <button class={props.design} type="submit" style={borderRadius}>
+              <button class={props.design} type="submit" style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
                 {props.label || 'Click Me!'}
               </button>
             </Show>
 
             <Show when={!props.submit}>
-              <button class={props.design} onClick={props.onClick} style={borderRadius}>
+              <button class={props.design} onClick={props.onClick} style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
                 {props.label || 'Click Me!'}
               </button>
             </Show>
           </Match>
           <Match when={!props.design}>
             <Show when={props.submit}>
-              <button class="button" type="submit" style={borderRadius}>
+              <button class="button" type="submit" style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
                 {props.label || 'Click Me!'}
               </button>
             </Show>
 
             <Show when={!props.submit}>
-              <button class="button" onClick={props.onClick} style={borderRadius}>
+              <button class="button" onClick={props.onClick} style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
                 {props.label || 'Click Me!'}
               </button>
             </Show>