精选最新
头像Initials Avatar
Initials on a colour computed from the name - the same person gets the same colour on every page, with no image involved.
#avatar#initials#fallback
4 个框架中级
Loading…
An avatar with a corner count badge that caps visually at 9+ but tells screen readers the real number.
<span class="relative inline-flex shrink-0">
<span
role="img"
aria-label="Marcus Webb"
class="inline-flex h-10 w-10 select-none items-center justify-center rounded-full bg-gradient-to-br from-rose-500 to-orange-500 text-sm font-semibold text-white"
>
<span aria-hidden="true">MW</span>
</span>
<!-- min-w + px, not a fixed width: "3" stays a circle, "9+" stretches into a
pill instead of squeezing. The visible number is aria-hidden; the sr-only
sentence carries the real count, uncapped. -->
<span class="absolute -right-1 -top-1 inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-rose-600 px-1 text-[10px] font-bold leading-none text-white ring-2 ring-white dark:ring-gray-950">
<span aria-hidden="true">9+</span>
<span class="sr-only">12 unread notifications</span>
</span>
</span>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
name必填 | string | - | 作为标题显示的套餐名称。 |
count | number | 0 | 徽标中显示的数字；超过 99 会折叠显示为“99+”。 |
max | number | 9 | Max |
className | string | - | 合并到根元素上的额外类名。 |
Two decisions carry the component. First, `min-w` plus horizontal padding instead of a fixed width: "3" renders as a circle, "9+" stretches into a pill, and nothing ever squeezes. Second, the cap is visual only - the visible number is `aria-hidden` and the `sr-only` sentence carries the uncapped count, because "9+" is a layout decision, not information. Zero renders no badge at all rather than an empty dot; if your design wants a mute-style indicator at zero, that is a different state, not this badge with no number. The `ring-2` must match whatever surface the avatar sits on, same as the status dot. Raise `max` to 99 for inbox-style counts, and keep the badge red only if red means "needs you" in your system - recolour via the class, not by stacking another meaning onto rose-600.