From b3ca3576efece41f501ce37ca3fff7d15962033c Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Wed, 7 Jan 2026 17:21:54 +0200
Subject: [PATCH] Add button w/ icon for all sizes to /components page and fix
 big button icon sizing

---
 app/components/elements/Button.module.css     |  6 ++++
 app/components/elements/Button.tsx            |  1 +
 .../components-showcase/routes/components.tsx | 28 ++++++++++++++++---
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/app/components/elements/Button.module.css b/app/components/elements/Button.module.css
index 16f32772d..5e51ae5e8 100644
--- a/app/components/elements/Button.module.css
+++ b/app/components/elements/Button.module.css
@@ -140,3 +140,9 @@
 	max-width: 0.857rem;
 	margin-inline-end: var(--s-1);
 }
+
+.buttonIconBig {
+	min-width: 1.5rem;
+	max-width: 1.5rem;
+	margin-inline-end: var(--s-2);
+}
diff --git a/app/components/elements/Button.tsx b/app/components/elements/Button.tsx
index ad2fa81bb..69880a89d 100644
--- a/app/components/elements/Button.tsx
+++ b/app/components/elements/Button.tsx
@@ -165,5 +165,6 @@ function iconClassName(
 		[styles.lonely]: !children,
 		[styles.buttonIconSmall]: size === "small",
 		[styles.buttonIconMiniscule]: size === "miniscule",
+		[styles.buttonIconBig]: size === "big",
 	});
 }
diff --git a/app/features/components-showcase/routes/components.tsx b/app/features/components-showcase/routes/components.tsx
index a4063d6fe..97fc5b466 100644
--- a/app/features/components-showcase/routes/components.tsx
+++ b/app/features/components-showcase/routes/components.tsx
@@ -263,19 +263,39 @@ function ButtonsSection({ id }: { id: string }) {
 				<Divider smallText>Sizes</Divider>
 
 				<ComponentRow label="Miniscule">
-					<SendouButton size="miniscule">Miniscule</SendouButton>
+					<div className="stack horizontal sm">
+						<SendouButton size="miniscule">Miniscule</SendouButton>
+						<SendouButton size="miniscule" icon={<EditIcon />}>
+							With icon
+						</SendouButton>
+					</div>
 				</ComponentRow>
 
 				<ComponentRow label="Small">
-					<SendouButton size="small">Small</SendouButton>
+					<div className="stack horizontal sm">
+						<SendouButton size="small">Small</SendouButton>
+						<SendouButton size="small" icon={<EditIcon />}>
+							With icon
+						</SendouButton>
+					</div>
 				</ComponentRow>
 
 				<ComponentRow label="Medium (default)">
-					<SendouButton size="medium">Medium</SendouButton>
+					<div className="stack horizontal sm">
+						<SendouButton size="medium">Medium</SendouButton>
+						<SendouButton size="medium" icon={<EditIcon />}>
+							With icon
+						</SendouButton>
+					</div>
 				</ComponentRow>
 
 				<ComponentRow label="Big">
-					<SendouButton size="big">Big</SendouButton>
+					<div className="stack horizontal sm">
+						<SendouButton size="big">Big</SendouButton>
+						<SendouButton size="big" icon={<EditIcon />}>
+							With icon
+						</SendouButton>
+					</div>
 				</ComponentRow>
 
 				<Divider smallText>With Icons</Divider>