Merge pull request #34 from devmount:enhancements/buttons

Button enhancements

Author: devmount

docs/_includes/default.njk

@@ -42,12 +42,18 @@
           </a>
           <div>
             <div class="text-xl font-semibold">Sloth.css</div>
-            <div class="text-sm text-muted font-sans flex gap-2">v{{ meta.version }}</div>
+            <code class="text-muted">v{{ meta.version }}</code>
           </div>
         </div>
         <div class="actions">
-          <a href="{{ repoUrl }}" target="_blank" class="button hollow neutral sm">GitHub</a>
-          <a href="{{ donationUrl }}" target="_blank" class="button hollow sm">Support</a>
+          <a href="{{ repoUrl }}" target="_blank" class="button hollow neutral sm">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
+            GitHub
+          </a>
+          <a href="{{ donationUrl }}" target="_blank" class="button hollow sm">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+            Support
+          </a>
         </div>
       </header>
 

docs/assets/styles/docs.css

@@ -53,10 +53,14 @@ body {
         display: flex;
         align-items: center;
         gap: 1rem;
+        code {
+          font-size: .625rem;
+        }
       }
       .actions {
         display: flex;
-        gap: .5rem;
+        align-items: center;
+        gap: .75rem;
       }
     }
 

docs/pages/components/button.md

@@ -5,9 +5,9 @@ description: Button component of Sloth.css.
 
 ## Button
 
-Buttons indicate actions the user can trigger on click. Buttons already have a base styling via the drop-in core of Sloth.css. However, this CSS component extends those by several color variations and button groups.
+Buttons indicate actions the user can trigger on click. Buttons already have a base styling via the drop-in core of Sloth.css. However, this CSS component extends those by several variations, sizes, groups and more.
 
-### Color variants
+### Button variants
 
 The default button without any class is already utilizing accent coloring. In addition, you can use `neutral`, `success` and `alert` classes for the corresponding colors.
 
@@ -41,6 +41,22 @@ Using the `disabled` attribute deactivates buttons. If you're using `onclick` ev
 <button class="alert" disabled>Delete account</button>
 ```
 
+### Button sizes
+
+Use the `sm` or `lg` classes to reduce or increase the font size and padding of a button. Note that the actual width and height are still depending on the buttons content (content won't overflow the button but stretch it).
+
+<div class="demo flex flex-wrap items-center gap-4">
+  <button class="sm">Click me!</button>
+  <button>No me!</button>
+  <button class="lg">NO ME!</button>
+</div>
+
+```html
+<button class="sm">Click me!</button>
+<button>No me!</button>
+<button class="lg">NO ME!</button>
+```
+
 ### Secondary button
 
 For less important buttons with outline and transparent backgrounds, the `hollow` class can be used. It can be combined with all other button related classes.
@@ -121,6 +137,40 @@ Use the `ghost` class to keep button sizing without background color or border.
 <a class="ghost button" href="#">GitHub</a>
 ```
 
+### Icon button
+
+Sloth.css doesn't ship any icons, since there are lots of icon libraries out there. However SVG icons are directly supported using the `icon` class. Buttons are set to _inline-flex_ per default, so multiple elements inside buttons are nicely aligned next to each other.
+
+The beautiful <a href="https://tabler.io/icons" target="_blank">Tabler Icons</a> work well with Sloth.css for example. You can also create icon buttons without any text. You might want to use the `rounded-full` utility for those.
+
+<div class="demo flex flex-wrap gap-4">
+  <button>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.875 6.27a2.225 2.225 0 0 1 1.125 1.948v7.284c0 .809 -.443 1.555 -1.158 1.948l-6.75 4.27a2.269 2.269 0 0 1 -2.184 0l-6.75 -4.27a2.225 2.225 0 0 1 -1.158 -1.948v-7.285c0 -.809 .443 -1.554 1.158 -1.947l6.75 -3.98a2.33 2.33 0 0 1 2.25 0l6.75 3.98h-.033z" /><path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /></svg>
+    Settings
+  </button>
+  <button class="hollow alert">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+    Donations
+  </button>
+  <button class="hollow neutral rounded-full">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
+  </button>
+</div>
+
+```html
+<button>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon">...</svg>
+  Settings
+</button>
+<button class="hollow alert">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon">...</svg>
+  Donations
+</button>
+<button class="hollow neutral rounded-full">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon">...</svg>
+</button>
+```
+
 ### Busy button
 
 Use the `busy` class to replace the text of a button with a <a href="/components/loader">loader</a> while keeping the button size. Works with secondary buttons, link buttons and pill buttons. Busy buttons are disabled.

src/components/_button.css

@@ -10,7 +10,9 @@ a.button {
   box-shadow: black var(--shadow-float);
   box-sizing: border-box;
   color: white;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  gap: .5rem;
   font-family: inherit;
   font-size: .875rem;
   padding: .75rem 1rem;
@@ -23,6 +25,17 @@ a.button {
   user-select: none;
   white-space: nowrap;
 
+  &.sm {
+    gap: .25rem;
+    font-size: .75rem;
+    padding: .25rem .5rem;
+  }
+  &.lg {
+    gap: .75rem;
+    font-size: 1rem;
+    padding: 1rem 1.25rem;
+  }
+
   &.neutral {
     background-color: var(--color-neutral);
   }
@@ -162,6 +175,19 @@ a.button {
     cursor: not-allowed;
     opacity: .5;
   }
+
+  & > .icon {
+    width: 1.5em;
+    height: 1.5em;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  &.rounded-full:has(.icon:only-child) {
+    padding: .75rem;
+  }
 }
 
 .button-group {