最新
徽章Status Badge Set
Success, warning, danger and info badges - a coloured dot beside a word that carries the meaning on its own.
#badge#status#dot
5 个框架初级
Loading…
A gradient pill with a periodic shine sweep - and a reduced-motion story that keeps the gradient.
<!--
Tailwind cannot declare @keyframes, so the sweep lives in a <style> block.
The shine strip starts at -translate-x-full; when reduced motion disables
the animation, that same utility parks it off-canvas permanently - the
static gradient stays, only the movement goes.
-->
<style>
@keyframes badge-shine {
0% { transform: translateX(-100%); }
60%, 100% { transform: translateX(100%); }
}
</style>
<span class="relative inline-flex items-center overflow-hidden rounded-full bg-gradient-to-r from-blue-600 via-violet-600 to-fuchsia-600 px-3 py-1 text-xs font-semibold text-white">
<span
class="pointer-events-none absolute inset-0 -translate-x-full animate-[badge-shine_2.5s_ease-in-out_infinite] bg-gradient-to-r from-transparent via-white/30 to-transparent motion-reduce:animate-none"
aria-hidden="true"
></span>
New feature
</span>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
label必填 | string | - | 加载时朗读的无障碍标签。 |
className | string | - | 合并到根元素上的额外类名。 |
The shine is an absolutely positioned strip of `via-white/30` gradient that a keyframe slides across the pill; `overflow-hidden` on the pill is what turns a moving rectangle into a glint. The reduced-motion handling is the part worth stealing: the strip starts at `-translate-x-full`, and because a running animation owns `transform`, that utility is inert - until `motion-reduce:animate-none` kills the animation, at which point the same utility takes back over and parks the strip off-canvas. Motion is the only casualty; the gradient stays. The keyframes travel in a `<style>` tag with the component, so there is nothing to add to a Tailwind config. Keep the label white and the gradient stops at 600 - lighter stops flunk AA under 12px text.