注目新着
アバター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.