Bileşenler

Uploader

Dosyaları sürükleyerek ya da Seç butonuyla seçtirir, yükleme ilerlemesini gösterir ve dosyaları listeler.

TasarımcıGeliştirici

Playground

Dosyaları sürükleyip bırakınya daİzin verilen en büyük boyut 100 MB

YönDurum Hata Pasif Çoklu

Figma varyantı

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

Yönler

Horizontal formlar için tek satırdır. Vertical, sınırlar için bir hint taşıyan daha büyük bir bırakma alanıdır.

Drag files hereor

Drag & Drop files hereorMaximum allowed size is 100 MB

Durumlar

Hover primary tint çizgi çizer; Pressed ve Drag Hover zemini surface/level-2 yapar, Drag Hover “Dosyayı bırakın” yazısını primary gösterir. Loading ilerleme çubuğunu gösterir, Loaded dosyaları küçük bir bırakma alanının üstünde listeler.

Drag files hereor

Drop file now

Drag files hereor

Cover.png4.7 Kb
Report-Q3.pdf2.2 Mb

Drag files hereor

Drag & Drop files hereorMaximum allowed size is 100 MB

45 Mb / 98 Mb

Cover.png4.7 Kb
Report-Q3.pdf2.2 Mb

Drag files hereor

Tokenlar

Part	Token
Box	`--color-surface-level-1, --color-foreground-low-emphasis line, --radius-form-element-small`
Dashed zone	`--border-width dashed --color-surface-level-4`
Hover	`--color-primary-tint`
Pressed / drag	`--color-surface-level-2, --color-primary dash`
Error	`--color-error`
Title / or / hint	`--color-foreground-high-emphasis / --color-foreground-low-emphasis`

Figma notları

Kesikler 8px, aralar 4px; kod deseni tarayıcıdan gelen border-dashed stilini (--border-width dashed) kullanır.
Horizontal, foreground/low-emphasis çizgili bir kutuda durur; Vertical’da bu kutu dosyalar listelenene kadar yok.
Horizontal Hover, Pressed ve Drag Hover 40px yerine 56px yüksekliğinde; kod yüksekliği korur.
Boş Vertical varyantların dolgusu yok ama Error’da surface/level-1 var; kod bunu izler.
Dosya adı bağlı olmayan 12px bir stil kullanıyor; kod ui/footnote/bold (Horizontal) ve ui/text small/bold (Vertical) kullanır.
Horizontal Error, başlığı ve “or”u tek bir low-emphasis metinde birleştirip hata ikonunu ekliyor; kod iki metni aynı renklerle korur.
Figma’da focus durumu yok; kod, butonu odaktayken bırakma alanına halka çizer.
Küçük alanda buton yalnızca yükleme ikonunu gösterir; kod onu browseLabel ile adlandırır.

Figma’dan koda

Figma	React
✈️ Direction = Horizontal / Vertical	`direction='horizontal' / 'vertical'`
🕹 State = Hover / Pressed	`:hover / :active`
🕹 State = Drag Hover	`a file dragged over it`
🕹 State = Loading	`progress={…}`
🕹 State = Loaded	`files={[…]}`
Error / Disable	`error / disabled`