Uploader

Playground

✈️ Direction=Vertical
🕹 State=Default
Disable=False
Error=False

Directions

Horizontal is a single row for forms. Vertical is a larger drop area with a hint for the limits.

States

Hover draws the primary tint line; Pressed and Drag Hover turn the background surface/level-2, and Drag Hover shows “Drop file now” in primary. Loading shows the progress bar, Loaded lists the files above a compact drop zone.

Tokens

Notes from Figma

• The dashes are 8px with 4px gaps; code uses the border-dashed style (--border-width dashed), whose pattern comes from the browser.
• Horizontal sits in a box with a foreground/low-emphasis line, which Vertical does not have until files are listed.
• Horizontal Hover, Pressed and Drag Hover are 56px tall instead of 40px; code keeps the height.
• The Vertical empty variants have no fill but Error has surface/level-1; code follows this.
• The file name uses an unbound 12px style; code uses ui/footnote/bold (Horizontal) and ui/text small/bold (Vertical).
• Horizontal Error merges the title and “or” into one low-emphasis text and adds the error icon; code keeps two texts with the same colors.
• Figma has no focus state; code rings the drop zone when its button is focused.
• In the compact zone the button shows only the upload icon; code names it with browseLabel.

Figma to code