Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-08-24 03:55:49 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Add button w/ icon for all sizes to /components page and fix big button icon sizing

Browse Source
This commit is contained in:
Kalle
2026-01-07 17:21:54 +02:00
parent 6013226cf6
commit b3ca3576ef
3 changed files with 31 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/components/elements/Button.module.css
View File

@@ -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);
}

1
app/components/elements/Button.tsx
View File

@@ -165,5 +165,6 @@ function iconClassName(
[styles.lonely]: !children,
[styles.buttonIconSmall]: size === "small",
[styles.buttonIconMiniscule]: size === "miniscule",
[styles.buttonIconBig]: size === "big",
});
}

28
app/features/components-showcase/routes/components.tsx
View File

@@ -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>