fix: correct the button disabled state

assets/css/output.css

@@ -747,10 +747,6 @@ body {
   margin-right: 0.5rem;
 }
 
-.mt-16 {
-  margin-top: 4rem;
-}
-
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -771,10 +767,6 @@ body {
   display: inline-flex;
 }
 
-.table {
-  display: table;
-}
-
 .hidden {
   display: none;
 }
@@ -879,10 +871,6 @@ body {
   flex: 1 1 0%;
 }
 
-.border-collapse {
-  border-collapse: collapse;
-}
-
 .-translate-x-1\/4 {
   --tw-translate-x: -25%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1070,11 +1058,6 @@ body {
   border-color: hsl(var(--border) / var(--tw-border-opacity));
 }
 
-.border-gray-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(209 213 219 / var(--tw-border-opacity));
-}
-
 .border-input {
   --tw-border-opacity: 1;
   border-color: hsl(var(--input) / var(--tw-border-opacity));
@@ -1099,11 +1082,6 @@ body {
   background-color: hsl(var(--destructive) / var(--tw-bg-opacity));
 }
 
-.bg-gray-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-}
-
 .bg-gray-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
@@ -1252,10 +1230,6 @@ body {
   padding-top: 0px;
 }
 
-.text-left {
-  text-align: left;
-}
-
 .text-center {
   text-align: center;
 }

internals/ui/components/button.templ

@@ -51,9 +51,10 @@ type ButtonProps struct {
 	// Default: "" (empty string)
 	Target string
 
-	// Disabled specifies whether the button is disabled.
-	// Default: "false"
-	Disabled string
+	// Disabled can be either a bool or a string.
+	// If bool (Go), it directly controls the disabled state.
+	// If string, it's treated as a JavaScript expression for dynamic disabling.
+	Disabled any
 
 	// Attributes allows passing additional HTML attributes to the button or anchor element.
 	// Default: nil
@@ -116,7 +117,7 @@ func getSizeClasses(size ButtonSize) string {
 //   - FullWidth: Whether the button should take up the full width of its container. Default: false
 //   - Href: If provided, renders the button as an anchor tag with this URL. Default: "" (empty string)
 //   - Target: The target attribute for the anchor tag (only used when Href is provided). Default: "" (empty string)
-//   - Disabled: Whether the button is disabled. Default: "false"
+//   - Disabled: Can be either a bool or a string. If bool (Go), it directly controls the disabled state. If string, it's treated as a JavaScript expression for dynamic disabling. Default: nil
 //   - Attributes: Additional HTML attributes to apply to the button or anchor element. Default: nil
 templ Button(props ButtonProps) {
 	if props.Href != "" {
@@ -131,6 +132,14 @@ templ Button(props ButtonProps) {
 				templ.KV("w-full", props.FullWidth),
 				props.Class,
 			}
+			if props.Disabled != nil {
+				if disabledBool, ok := props.Disabled.(bool); ok && disabledBool {
+					aria-disabled="true"
+				}
+				if disabledStr, ok := props.Disabled.(string); ok {
+					:aria-disabled={ disabledStr }
+				}
+			}
 			{ props.Attributes... }
 		>
 			{ props.Text }
@@ -147,8 +156,13 @@ templ Button(props ButtonProps) {
 				templ.KV("w-full", props.FullWidth),
 				props.Class,
 			}
-			if props.Disabled == "true" {
-				disabled
+			if props.Disabled != nil {
+				if disabledBool, ok := props.Disabled.(bool); ok {
+					disabled?={ disabledBool }
+				}
+				if disabledStr, ok := props.Disabled.(string); ok {
+					:disabled={ disabledStr }
+				}
 			}
 			{ props.Attributes... }
 		>

internals/ui/showcase/button.templ

@@ -48,7 +48,8 @@ templ ButtonShowcase() {
 					@components.Button(components.ButtonProps{Text: "With Click", Attributes: templ.Attributes{"@click": "alert('Hey Dude!')"}})
 					// Vanilla JS example
 					// @components.Button(components.ButtonProps{Text: "With Click", Attributes: templ.Attributes{"onclick": "alert('Hey Dude!')"}})
-					@components.Button(components.ButtonProps{Text: "Disabled", Disabled: "true"})
+					@components.Button(components.ButtonProps{Text: "Disabled", Disabled: true})
+					// @components.Button(components.ButtonProps{Text: "Disabled", Disabled: "true"})
 					@components.Button(components.ButtonProps{Text: "Full Width", Class: "w-full"})
 				</div>
 			</div>