feat: add upload-button (#10938)

Author: tomivirkki

dev/upload-manager.html

@@ -8,34 +8,6 @@
     <script type="module" src="./common.js"></script>
 
     <style>
-      /* Temporary Upload Button */
-      .temp-upload-button {
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-        padding: 8px 16px;
-        background: #1976d2;
-        color: white;
-        border: none;
-        border-radius: 4px;
-        font-size: 14px;
-        cursor: pointer;
-        transition: background 0.2s;
-      }
-
-      .temp-upload-button:hover {
-        background: #1565c0;
-      }
-
-      .temp-upload-button:disabled {
-        background: #ccc;
-        cursor: not-allowed;
-      }
-
-      .temp-upload-button input[type='file'] {
-        display: none;
-      }
-
       /* Temporary Drop Zone */
       .temp-drop-zone {
         border: 2px dashed #ccc;
@@ -175,10 +147,7 @@ <h1>Upload Manager Demo</h1>
     <p>This page demonstrates the headless <code>UploadManager</code> class.</p>
 
     <div class="demo-controls">
-      <label class="temp-upload-button" id="upload-button">
-        Upload Files...
-        <input type="file" multiple />
-      </label>
+      <vaadin-upload-button id="upload-button">Upload Files...</vaadin-upload-button>
     </div>
 
     <div class="temp-drop-zone" id="dropzone">
@@ -188,6 +157,7 @@ <h1>Upload Manager Demo</h1>
     <ul class="temp-file-list" id="file-list"></ul>
 
     <script type="module">
+      import '@vaadin/upload/vaadin-upload-button.js';
       import { xhrCreator } from '@vaadin/upload/test/helpers.js';
       import { UploadManager } from '@vaadin/upload/vaadin-upload-manager.js';
 
@@ -213,13 +183,9 @@ <h1>Upload Manager Demo</h1>
       // Use mock XHR
       manager._createXhr = xhrCreator({ size: 512, uploadTime: 3000, stepTime: 500 });
 
-      // Setup file input
+      // Link upload button to manager
       const button = document.querySelector('#upload-button');
-      const input = button.querySelector('input');
-      input.addEventListener('change', () => {
-        manager.addFiles(input.files);
-        input.value = '';
-      });
+      button.manager = manager;
 
       // Setup drop zone
       const dropzone = document.querySelector('#dropzone');

packages/aura/src/color.css

@@ -57,6 +57,7 @@ vaadin-app-layout > :not([slot]),
 vaadin-notification-container,
 vaadin-avatar,
 vaadin-button,
+vaadin-upload-button,
 vaadin-context-menu-item,
 vaadin-crud-edit,
 vaadin-drawer-toggle,
@@ -222,7 +223,7 @@ vaadin-tab,
 }
 
 /* Restore accent color for child elements like badges */
-:where(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle) > *,
+:where(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle) > *,
 :where(vaadin-tab) > *,
 :where(vaadin-side-nav-item) > * {
   --aura-accent-color-light: var(--aura-accent-color-light-initial);
@@ -231,7 +232,7 @@ vaadin-tab,
 }
 
 /* Badges and other content that uses contrast color inside filled variants */
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='primary'] > *,
+:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='primary'] > *,
 vaadin-tabs[theme~='filled'] > vaadin-tab[selected] > :not([slot='tooltip']),
 vaadin-side-nav[theme~='filled'] > vaadin-side-nav-item[current] > :not([slot='children']):not([slot='tooltip']),
 :is(

packages/aura/src/components/button.css

@@ -3,7 +3,7 @@
   --vaadin-button-shadow: var(--aura-shadow-xs);
 }
 
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit) {
+:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit) {
   transition: scale 180ms;
   position: relative;
   --_background: var(--aura-accent-surface) padding-box;
@@ -14,19 +14,23 @@ vaadin-drawer-toggle[theme~='tertiary']::part(icon) {
   opacity: 0.6;
 }
 
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(:not([theme~='tertiary'])) {
+:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(
+  :not([theme~='tertiary'])
+) {
   --aura-surface-level: 6;
   --aura-surface-opacity: 0.3;
   box-shadow: var(--vaadin-button-shadow);
 }
 
 /* prettier-ignore */
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not([theme~='primary'], [theme~='tertiary']) {
+:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not([theme~='primary'], [theme~='tertiary']) {
   background: var(--vaadin-button-background, var(--_background));
   --vaadin-button-border-color: var(--aura-accent-border-color);
 }
 
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(:not([theme~='primary'])) {
+:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(
+  :not([theme~='primary'])
+) {
   outline-offset: calc(var(--vaadin-button-border-width, 1px) * -1);
 }
 
@@ -35,24 +39,30 @@ Increase padding, but only for buttons that don't have an icon in the default sl
 Buttons that place an icon in the default slot are assumed to be icon-only buttons.
 */
 /* prettier-ignore */
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not(:has(> :is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar):not([slot]))) {
+:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not(:has(> :is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar):not([slot]))) {
   --vaadin-button-padding: round(var(--vaadin-padding-s) / 1.4, 1px)
     max(var(--vaadin-padding-m), round(var(--vaadin-radius-m) / 1.5, 1px));
 }
 
 /* Decrease padding when an icon is placed in the prefix or suffix slot */
-:is(vaadin-button, vaadin-menu-bar-button):has(> [slot='prefix']:is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar)),
+:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button):has(
+  > [slot='prefix']:is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar)
+),
 vaadin-drawer-toggle:empty {
   padding-inline-start: max(var(--vaadin-padding-s), round(var(--vaadin-radius-m) / 1.75, 1px));
 }
 
-:is(vaadin-button, vaadin-menu-bar-button):has(> [slot='suffix']:is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar)),
+:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button):has(
+  > [slot='suffix']:is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar)
+),
 vaadin-drawer-toggle:empty,
 vaadin-menu-bar-button[aria-haspopup='true']:not([slot='overflow']) {
   padding-inline-end: max(var(--vaadin-padding-s), round(var(--vaadin-radius-m) / 1.75, 1px));
 }
 
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where([theme~='primary']) {
+:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(
+  [theme~='primary']
+) {
   outline-offset: 2px;
   --vaadin-button-font-weight: var(--aura-font-weight-semibold);
   --vaadin-button-text-color: var(--aura-accent-contrast-color);
@@ -61,11 +71,13 @@ vaadin-menu-bar-button[aria-haspopup='true']:not([slot='overflow']) {
   --vaadin-button-shadow: var(--aura-shadow-s);
 }
 
-:is(vaadin-button, vaadin-menu-bar-button)[disabled][theme~='primary']::part(label) {
+:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button)[disabled][theme~='primary']::part(label) {
   color: color-mix(in srgb, currentColor 50%, transparent);
 }
 
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not([disabled])::before {
+:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not(
+    [disabled]
+  )::before {
   content: '';
   position: absolute;
   inset: calc(var(--vaadin-button-border-width, 1px) * -1);
@@ -79,43 +91,49 @@ vaadin-menu-bar-button[aria-haspopup='true']:not([slot='overflow']) {
 }
 
 @supports (color: hsl(0 0 0)) {
-  :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not([disabled])::before {
+  :is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not(
+      [disabled]
+    )::before {
     background-color: oklch(from currentColor calc(l + 0.4 - c) c h / calc(1 - l / 2));
   }
 }
 
 @media (any-hover: hover) {
   /* prettier-ignore */
-  :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):hover:not([disabled], [active])::before {
+  :is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):hover:not([disabled], [active])::before {
     opacity: 0.03;
   }
 
   /* prettier-ignore */
-  :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[theme~='primary']:hover:not([disabled], [active])::before {
+  :is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[theme~='primary']:hover:not([disabled], [active])::before {
     opacity: 0.12;
   }
 }
 
 @media (min-resolution: 2x) {
   /* prettier-ignore */
-  :is(vaadin-button, vaadin-menu-bar-button[first-visible][last-visible], vaadin-drawer-toggle)[active]:not([disabled], [aria-disabled='true']) {
+  :is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button[first-visible][last-visible], vaadin-drawer-toggle)[active]:not([disabled], [aria-disabled='true']) {
     scale: 0.98;
     transition-duration: 50ms;
   }
 }
 
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[active]:not([disabled]) {
+:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[active]:not(
+    [disabled]
+  ) {
   box-shadow: none;
 }
 
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[active]:not([disabled])::before {
+:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[active]:not(
+    [disabled]
+  )::before {
   transition-duration: 0s;
   opacity: 0.08;
   background: oklch(from currentColor min(c, 1 - l + c) calc(c * 0.9) h);
 }
 
 /* prettier-ignore */
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[theme~='primary'][active]:not([disabled])::before {
+:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[theme~='primary'][active]:not([disabled])::before {
   opacity: 0.16;
 }
 

packages/aura/src/surface.css

@@ -13,6 +13,7 @@ vaadin-app-layout,
 vaadin-app-layout::part(navbar),
 vaadin-app-layout::part(drawer),
 vaadin-button,
+vaadin-upload-button,
 vaadin-card,
 vaadin-checkbox::part(checkbox),
 vaadin-details[theme~='filled'],

packages/upload/src/styles/vaadin-upload-button-base-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export declare const uploadButtonStyles: CSSResult[];

packages/upload/src/styles/vaadin-upload-button-base-styles.js

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+import { buttonStyles } from '@vaadin/button/src/styles/vaadin-button-base-styles.js';
+
+const uploadButton = css``;
+
+export const uploadButtonStyles = [buttonStyles, uploadButton];

packages/upload/src/vaadin-upload-button.d.ts

@@ -0,0 +1,100 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import type { UploadManager } from './vaadin-upload-manager.js';
+
+/**
+ * `<vaadin-upload-button>` is a button component for file uploads.
+ * When clicked, it opens a file picker dialog and calls addFiles
+ * on a linked UploadManager.
+ *
+ * ```html
+ * <vaadin-upload-button>Upload Files</vaadin-upload-button>
+ * ```
+ *
+ * The button must be linked to an UploadManager by setting the
+ * `manager` property:
+ *
+ * ```javascript
+ * const button = document.querySelector('vaadin-upload-button');
+ * button.manager = uploadManager;
+ * ```
+ *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name | Description
+ * ----------|-------------
+ * `label`   | The label (text) inside the button.
+ * `prefix`  | A slot for content before the label (e.g. an icon).
+ * `suffix`  | A slot for content after the label (e.g. an icon).
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute          | Description
+ * -------------------|-------------
+ * `active`           | Set when the button is pressed down, either with mouse, touch or the keyboard
+ * `disabled`         | Set when the button is disabled
+ * `focus-ring`       | Set when the button is focused using the keyboard
+ * `focused`          | Set when the button is focused
+ * `has-tooltip`      | Set when the button has a slotted tooltip
+ * `max-files-reached`| Set when the manager has reached maxFiles
+ *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property                |
+ * :----------------------------------|
+ * | `--vaadin-button-background`     |
+ * | `--vaadin-button-border-color`   |
+ * | `--vaadin-button-border-radius`  |
+ * | `--vaadin-button-border-width`   |
+ * | `--vaadin-button-font-size`      |
+ * | `--vaadin-button-font-weight`    |
+ * | `--vaadin-button-gap`            |
+ * | `--vaadin-button-height`         |
+ * | `--vaadin-button-line-height`    |
+ * | `--vaadin-button-margin`         |
+ * | `--vaadin-button-padding`        |
+ * | `--vaadin-button-text-color`     |
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ */
+declare class UploadButton extends ButtonMixin(ElementMixin(ThemableMixin(HTMLElement))) {
+  /**
+   * Reference to an UploadManager.
+   * When set, the button will automatically disable when maxFilesReached
+   * becomes true on the manager. The file picker will also use the manager's
+   * `accept` and `maxFiles` settings.
+   */
+  manager: UploadManager | null;
+
+  /**
+   * Capture attribute for mobile file input.
+   */
+  capture: string | undefined;
+
+  /**
+   * True when max files has been reached on the manager.
+   * The button will not open the file picker when this is true.
+   */
+  maxFilesReached: boolean;
+
+  /**
+   * Opens the file picker dialog.
+   */
+  openFilePicker(): void;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-upload-button': UploadButton;
+  }
+}
+
+export { UploadButton };