Components
File upload button
The file upload button is variant of the button component that is specifically used for users to upload data to a form.
Example
Default state
Max file size: 25mbFile types accepted: jpeg,png,pdf
Uploading state
Max file size: 25mbFile types accepted: jpeg,png,pdf
When the user has uploaded files
Max file size: 25mbFile types accepted: jpeg,png,pdf
- filenameuploaded.jpg remove
- anotherfileuploaded.pdf remove
<h3>Default state</h3><div class="form__control form__upload"><label for="upload">Upload file</label><input type="file" class="button button--upload" id="upload"/><small>Max file size: 25mb</small><small>File types accepted: jpeg,png,pdf</small></div><h3>Uploading state</h3><div class="form__control form__upload "><label for="upload" class="form__upload--uploading">Uploading...</label><input type="file" class="button button--upload" id="upload"/><small>Max file size: 25mb</small><small>File types accepted: jpeg,png,pdf</small></div><h3>When the user has uploaded files</h3><div class="form__control form__upload form__uploaded--files"><label for="upload">Upload file</label><input type="file" class="button button--upload" id="upload"/><small>Max file size: 25mb</small><small>File types accepted: jpeg,png,pdf</small><div class="files-uploaded"><ul><li>filenameuploaded.jpg <span class="remove-upload">remove</span></li><li>anotherfileuploaded.pdf <span class="remove-upload">remove</span></li></ul></div></div>
When to use this
You can use this component when you want the user to upload files.