<vaadin-upload-button>
`<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.
- Category
- Forms
- Built with
Lit- Library
Vaadin
- Author
Vaadin
- Package
-
@vaadin/upload - Component size
- 9.7 kB JS (minified + gzipped, JS includes dependencies beyond the library)
- Library size
- 19.9 kB JS (shared by every Vaadin component, loaded once per page)
- Popular
- 3 out of 5
- Downloads
- 63,857/week · jsDelivr 2,711 hits/month (whole @vaadin/upload package)
- Latest stable version
25.3.2- Last published
- Component last changed
- (in
25.3.0) - License
- Apache-2.0
<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.
<vaadin-upload-button>Upload Files</vaadin-upload-button>
The button must be linked to an UploadManager by setting the
manager property:
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 |
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 documentation.
Attributes
capturedisabledmanagermax-files-reachedtheme