feat: variable size buttons

Author: scriptcoded

.changeset/all-hairs-run.md

@@ -0,0 +1,6 @@
+---
+"@scouterna/ui-react": patch
+"@scouterna/ui-webc": patch
+---
+
+Variable size buttons

packages/ui-react/package.json

@@ -27,8 +27,8 @@
   },
   "devDependencies": {
     "@types/react": "^19.2.7",
-    "react": "^19.2.1",
-    "react-dom": "^19.2.1",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "typescript": "^5.9.3"
   }
 }

packages/ui-webc/package.json

@@ -55,18 +55,18 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "iconoir": "^7.11.0",
-    "@tabler/icons": "^3.35.0"
+    "@tabler/icons": "^3.36.1"
   },
   "devDependencies": {
     "@stencil-community/postcss": "^2.2.0",
-    "@stencil/core": "^4.38.3",
+    "@stencil/core": "^4.41.1",
     "@types/jest": "^30.0.0",
     "@types/node": "^24.10.1",
     "jest": "^30.2.0",
     "jest-cli": "^30.2.0",
     "postcss-import": "^16.1.1",
-    "postcss-preset-env": "^10.5.0",
-    "puppeteer": "^24.32.0"
+    "postcss-preset-env": "^10.6.0",
+    "puppeteer": "^24.34.0"
   },
   "license": "MIT"
 }

packages/ui-webc/src/components/button/button.css

@@ -1,23 +1,33 @@
 scout-button {
   display: inline-block;
   height: var(--spacing-10);
+  font: var(--type-body-base);
+
+  &[data-size="large"] {
+    height: var(--spacing-12);
+    font: var(--type-body-lg);
+  }
 
   .button {
     flex: 1;
     display: inline-flex;
+    width: 100%;
     height: 100%;
     align-items: center;
     justify-content: center;
     gap: var(--spacing-3);
     padding: 0 var(--spacing-4);
-    font: var(--type-body-base);
     border-radius: var(--spacing-2);
     border: 1px solid transparent;
     cursor: pointer;
     text-decoration: none;
     box-sizing: border-box;
   }
 
+  &[data-size="large"] .button {
+    padding: 0 var(--spacing-5);
+  }
+
   .icon {
     width: var(--spacing-5);
     height: var(--spacing-5);
@@ -29,17 +39,17 @@ scout-button {
     height: 100%;
   }
 
-  &.icon-only .button {
+  &[data-icon-only] .button {
     aspect-ratio: 1 / 1;
     justify-content: center;
     padding: 0;
   }
 
-  &.icon-only .icon {
+  &[data-icon-only] .icon {
     margin: 0;
   }
 
-  &.icon-only .content {
+  &[data-icon-only] .content {
     /* Visually hidden: https://www.a11yproject.com/posts/how-to-hide-content/ */
     clip: rect(0 0 0 0);
     clip-path: inset(50%);

packages/ui-webc/src/components/button/button.tsx

@@ -2,11 +2,12 @@ import {
   Component,
   Event,
   type EventEmitter,
-  h,
   Host,
+  h,
   Prop,
 } from "@stencil/core";
 
+export type Size = "medium" | "large";
 export type Variant = "primary" | "outlined" | "text" | "caution" | "danger";
 
 /**
@@ -25,6 +26,11 @@ export class ScoutButton {
   @Prop() target?: string;
   @Prop() rel?: string;
 
+  /**
+   * Size of the button.
+   */
+  @Prop() size: Size = "medium";
+
   /**
    * The variant primarily affects the color of the button.
    */
@@ -59,7 +65,12 @@ export class ScoutButton {
     const icon = this.icon && <span class="icon" innerHTML={this.icon} />;
 
     return (
-      <Host class={this.iconOnly ? "icon-only" : ""}>
+      <Host
+        // Using data- attributes instead of classes because React fights and
+        // removes them sometimes. Hopefully we can find a proper fix later.
+        data-size={this.size}
+        data-icon-only={this.iconOnly}
+      >
         <Tag
           class={`button ${this.variant}`}
           onClick={() => this.scoutClick.emit()}

packages/ui-webc/src/components/button/readme.md

@@ -20,6 +20,7 @@ Will render a `<button>` element when the `type` is set to "button",
 | `iconOnly`     | `icon-only`     |                                                                               | `boolean`                                                    | `false`      |
 | `iconPosition` | `icon-position` |                                                                               | `"after" \| "before"`                                        | `"after"`    |
 | `rel`          | `rel`           |                                                                               | `string`                                                     | `undefined`  |
+| `size`         | `size`          | Size of the button.                                                           | `"large" \| "medium"`                                        | `"medium"`   |
 | `target`       | `target`        |                                                                               | `string`                                                     | `undefined`  |
 | `type`         | `type`          |                                                                               | `"button" \| "link" \| "reset" \| "submit"`                  | `"button"`   |
 | `variant`      | `variant`       | The variant primarily affects the color of the button.                        | `"caution" \| "danger" \| "outlined" \| "primary" \| "text"` | `"outlined"` |

packages/ui-webc/src/components/input/input.tsx

@@ -8,6 +8,9 @@ import {
 } from "@stencil/core";
 import { inputMixin } from "../../mixins/inputMixin";
 
+export type Size = "medium" | "large";
+export type Variant = "default" | "elevated";
+
 export type InputType =
   | "text"
   | "password"
@@ -50,14 +53,14 @@ export class ScoutInput
    * inputs, such as a top search field on a page, while medium fields are used
    * for regular form inputs.
    */
-  @Prop() size: "medium" | "large" = "medium";
+  @Prop() size: Size = "medium";
 
   /**
    * Visual variant of the input element. Elevated inputs have a shadow to help
    * them stand out from the background and should only be used when absolutely
    * positioned above other content.
    */
-  @Prop() variant: "default" | "elevated" = "default";
+  @Prop() variant: Variant = "default";
 
   /**
    * Type of input element. If you need a number input, read the accessibility