精选最新
头像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…
A rounded-square avatar for teams, workspaces and projects, with a circle opt-out for people.
<!--
A rounded square instead of a disc. The convention this trades on: circles
read as *people*, rounded squares read as *things* - teams, workspaces,
projects. Keep the two shapes for the two meanings and users can tell an
owner from an org at a glance.
-->
<span
role="img"
aria-label="Design Systems"
class="inline-flex h-10 w-10 shrink-0 select-none items-center justify-center rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 text-sm font-semibold text-white"
>
<span aria-hidden="true">DS</span>
</span>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
name必填 | string | - | 作为标题显示的套餐名称。 |
shape | 'squared' | 'circle' | 'squared' | Shape |
className | string | - | 合并到根元素上的额外类名。 |
The shape is semantics, not taste: across most modern products circles read as *people* and rounded squares read as *things* - organisations, workspaces, bots. Keeping both behind one `shape` prop lets a member list show an org and its owner side by side and still be scannable. `rounded-xl` is the sweet spot at 40px; if you grow the avatar, grow the radius with it or the corners start looking sharp at 64px. The gradient fill is a single fixed pair here - if you want per-entity colour, lift the deterministic hash from `avatar-initials-basic`; the two compose cleanly.