最新
错误页面Centered 404 Page
A centred 404 with a big gradient code, a heading, sub-copy and a pair of recovery actions.
#error#404#not-found
3 个框架初级
Loading…
A 429 throttle screen with a stopwatch icon, a retry-after hint and a Try again action.
<section class="mx-auto flex w-full max-w-lg flex-col items-center px-4 py-16 text-center sm:py-24">
<span class="flex h-16 w-16 items-center justify-center rounded-full bg-amber-50 text-amber-600 dark:bg-amber-950 dark:text-amber-400">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" class="h-8 w-8" aria-hidden="true">
<circle cx="12" cy="13" r="8" />
<path d="M12 9v4l2.5 2M9 2h6" />
</svg>
</span>
<p class="mt-6 text-sm font-semibold uppercase tracking-widest text-amber-600 dark:text-amber-400">Error 429</p>
<h1 class="mt-2 text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">
Too many requests
</h1>
<p class="mt-3 max-w-md text-base leading-relaxed text-gray-600 dark:text-gray-400">
You've hit the rate limit. Please wait a moment before trying again - you can retry in about 60 seconds.
</p>
<div class="mt-8 flex w-full flex-col items-center justify-center gap-3 sm:flex-row">
<button type="button" class="inline-flex w-full items-center justify-center rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none sm:w-auto dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950">
Try again
</button>
</div>
</section>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
code | string | '429' | Code |
title | string | 'Too many requests' | 卡片的标题文本。 |
message | string | - | 通知的正文文本。 |
retryAfter | string | - | Retry after |
retryLabel | string | 'Try again' | Retry label |
onRetry | () => void | - | On retry |
className | string | - | 合并到根元素上的额外类名。 |
Feed `retryAfter` and it is woven into the default message; the whole line can be overridden with `message`. Retry is a `<button>` on `onRetry` - gate it behind your own countdown if you want.