fix(button-icon): without text (#766)

* fix(button-icon): default --button-icon-font-size to 0 * fix(button-icon): default --buton-icon-gap to 0 * docs(button-icon): improve docs about icon buttons with and without text * chore: remove button-icon styles for input * docs: fix links
minvws · Feb 5, 2025 · 9aa9ba0 · 9aa9ba0
1 parent b2803ba
commit 9aa9ba0
Show file tree

Hide file tree

Showing 9 changed files with 578 additions and 239 deletions.
diff --git a/docs/src/routes/components/button-icon-only/+page.svelte b/docs/src/routes/components/button-icon-only/+page.svelte
@@ -30,12 +30,11 @@
         <h2>Benodigde stappen:</h2>
         <ol>
           <li>
-            Voeg de class <code>icon</code> toe aan de knop om gebruik te maken van de visuele weergave
-            van een icoonknop.
+            Voeg de class <code>icon-only</code> toe aan de knop om gebruik te maken van de visuele weergave
+            van een icoonknop zonder achtergrond.
           </li>
           <li>
-            Voeg de class van het gewenste icoon toe op de knop. Voor meer informatie zie:
-            <a href="{base}/components/icons">Iconen</a>.
+            Voeg een icoon toe aan de knop. Zie voor meer informatie: <a href="{base}/components/button/icon">Icoonknop</a>.
           </li>
         </ol>
 
@@ -163,22 +162,22 @@
         <Code
           language="html"
           code={`
-<button href="{base}/components/button-icon" class="icon-only">Lorem ipsum <img src="path/to/img.svg" alt="Kat"></button>
+<button href="{base}/components/button/icon" class="icon-only">Lorem ipsum <img src="path/to/img.svg" alt="Kat"></button>
 `}
         />
 
         <h2>Link als knop met <code>img</code></h2>
         <h3>Visuele weergave:</h3>
 
-        <a href="{base}/components/button-icon" class="button icon-only"
+        <a href="{base}/components/button/icon" class="button icon-only"
           >Lorem ipsum <img src="$img/cat.svg" alt="Kat" /></a
         >
 
         <h3>HTML-voorbeeld:</h3>
         <Code
           language="html"
           code={`
-<a href="{base}/components/button-icon" class="button icon-only">Lorem ipsum <img src="path/to/img.svg" alt="Kat"></a>
+<a href="{base}/components/button/icon" class="button icon-only">Lorem ipsum <img src="path/to/img.svg" alt="Kat"></a>
 `}
         />
       </section>

diff --git a/docs/src/routes/components/button-icon/+page.svelte b/docs/src/routes/components/button-icon/+page.svelte
diff --git a/docs/src/routes/components/button/+page.md b/docs/src/routes/components/button/+page.md
@@ -76,12 +76,12 @@ onderstaande tabel staan enkele veelvoorkomende voorbeelden.
 - [Basisweergave](/components/button/button-base)
 - [Knoppen groeperen](/components/button/button-container)
 - [Call to action button](/components/button/call-to-action)
+- [Icoonknoppen](/components/button/icon)
+- [Icoonknoppen zonder achtergrond](/components/button-icon-only)
 
 ### Overige soorten knoppen:
 
 - [Dropdown button](/components/button-dropdown)
 - [Ghost button](/components/button-ghost)
 - [Destructieve knop](/components/button-destructive)
-- [Icoonknoppen](/components/button-icon)
-- [Icoonknoppen zonder achtergrond](/components/button-icon-only)
 - [Terug naar hoofdmenu](/components/button-to-top)