Upload progress

A list of files uploading in parallel, each with its own progress and a finished state.

Built withcardlistprogressbadgebutton
Upload progress
Default density Compact density Restart from the initial state Show the copyable source

Uploading 3 files

You can keep working while these finish.

brand-guidelines.pdf hero-video.mp4 photos.zip
1 of 3 done Cancel all Hide
<tp-card style="inline-size:min(100%, 26rem)"> <h2 slot="header">Uploading 3 files</h2> <p slot="description">You can keep working while these finish.</p> <div style="display:grid;gap:var(--tp-space-4)"> <tp-progress value="100" label="brand-guidelines.pdf"> <span slot="label">brand-guidelines.pdf</span> </tp-progress> <tp-progress value="64" label="hero-video.mp4"> <span slot="label">hero-video.mp4</span> </tp-progress> <tp-progress value="12" label="photos.zip"> <span slot="label">photos.zip</span> </tp-progress> </div> <tp-badge slot="action" variant="secondary">1 of 3 done</tp-badge> <tp-button slot="footer" variant="outline">Cancel all</tp-button> <tp-button slot="footer" variant="ghost">Hide</tp-button> </tp-card>

How it’s composed

  • Progress bars each carry the file name as their label, so every bar is announced with what it measures.
  • Badge summarizes the batch in the Card’s action slot.
  • Button keeps cancel and hide as quiet secondary actions; there is no primary action while files are uploading.

Make it yours

Replace a finished bar with a List row and an open action, and show an error state with a retry for failed files. To let people pick or drop the files too, File upload’s upload adapter reports the same per-file progress, retry and cancellation.

More patterns

Sign in

Email and password sign-in with a remember-me option, a recovery link and a single primary action.

Password recovery

Request a reset link by email, with a quiet description of what happens next and a route back to sign in.

Verify code

A six-digit one-time code, grouped in threes, with a resend action for the email that never arrived.

Notification settings

Grouped switches for email and push notifications, each with a one-line explanation.

Invite teammates

Invite by email with a role picker, above the list of people who already have access.

Choose a plan

Three plans as a radio group, with the price and what each includes, and one action to continue.

Send feedback

A short rating and an open comment, the two questions that get answered most often.

Schedule a meeting

Pick a day on the calendar and one of the open time slots beside it.

Sound settings

Volume sliders for each channel and a switch for spatial audio.

Profile card

A person, their role and a few numbers, with follow and message actions.

API key

A secret key shown once, with a copy action, a warning and a way to roll it.