# Upload Error State

> A copy-paste File Upload component from NudaUI. Pure HTML + CSS, zero dependencies, MIT licensed.

| | |
| --- | --- |
| Id | `upload-error-state` |
| Category | File Upload (`file-upload`) |
| Languages | html, css |
| Needs JavaScript | no |
| Licence | MIT |
| JSON | https://nudaui.dev/api/components/upload-error-state.json |

## Code

Paste this verbatim. Nothing here needs a build step.

### HTML

```html
<div class="nuda-uperr" role="alert">
  <div class="nuda-uperr__icon" aria-hidden="true">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <circle cx="12" cy="12" r="9" />
      <path d="M12 8v5M12 16.5v.5" stroke-linecap="round" />
    </svg>
  </div>
  <div class="nuda-uperr__meta">
    <p class="nuda-uperr__name">video-4k.mp4</p>
    <p class="nuda-uperr__msg">Upload failed — connection lost</p>
  </div>
  <button class="nuda-uperr__retry" type="button">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
         aria-hidden="true">
      <path d="M3 12a9 9 0 1 0 3-6.7" stroke-linecap="round" />
      <path d="M3 4v5h5" stroke-linecap="round" stroke-linejoin="round" />
    </svg>
    Retry
  </button>
</div>
```

### CSS

```css
/* Upload Error State
   Red-bordered card with a retry CTA. */

.nuda-uperr {
  --err: #ff5e7a;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(255, 94, 122, 0.06);
  border: 1px solid var(--err);
  border-radius: 10px;
  min-width: 300px;
}

.nuda-uperr__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 94, 122, 0.12);
  border-radius: 8px;
  color: var(--err);
  flex-shrink: 0;
}
.nuda-uperr__icon svg { width: 18px; height: 18px; }

.nuda-uperr__meta { flex: 1; min-width: 0; }

.nuda-uperr__name {
  margin: 0;
  font-size: 0.85rem;
  color: #fafafa;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nuda-uperr__msg {
  margin: 0;
  font-size: 0.75rem;
  color: var(--err);
}

.nuda-uperr__retry {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.65rem;
  background: var(--err);
  color: #09090b;
  border: none;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s;
  flex-shrink: 0;
}

.nuda-uperr__retry:hover { filter: brightness(1.1); }
.nuda-uperr__retry svg { width: 13px; height: 13px; }

@media (prefers-reduced-motion: reduce) {
  .nuda-uperr__retry { transition: none; }
}
```

### Preview-only CSS

Extra styling the live preview injects. Copy it only if you want the demo's exact framing.

```css

      .nuda-uperr{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:rgba(255,94,122,.06);border:1px solid #ff5e7a;border-radius:10px;min-width:300px}
      .nuda-uperr__icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(255,94,122,.12);border-radius:8px;color:#ff5e7a;flex-shrink:0}
      .nuda-uperr__icon svg{width:18px;height:18px}
      .nuda-uperr__meta{flex:1;min-width:0}
      .nuda-uperr__name{margin:0;font-size:.85rem;color:#fafafa;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      .nuda-uperr__msg{margin:0;font-size:.75rem;color:#ff5e7a}
      .nuda-uperr__retry{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .65rem;background:#ff5e7a;color:#09090b;border:none;border-radius:6px;font-size:.78rem;font-weight:600;cursor:pointer;transition:filter .15s;flex-shrink:0}
      .nuda-uperr__retry:hover{filter:brightness(1.1)}
      .nuda-uperr__retry svg{width:13px;height:13px}
      @media(prefers-reduced-motion:reduce){.nuda-uperr__retry{transition:none}}
    
```

## Using it

- Drop the HTML wherever you need it — JSX, Blade, Jinja, ERB, or a plain `.html` file.
- Put the CSS in a global stylesheet, a `<style>` block, or whatever your build expects.
- Colour, size and timing read from CSS custom properties: override them on `:root` or any parent.
- Class names are prefixed `nuda-*`, so nothing collides with Tailwind utilities.

---

Canonical HTML version: https://nudaui.dev/components/upload-error-state