नया
अवतारAvatar Size Scale
One avatar, six sizes - xs through 2xl, with the type scaling in step with the box.
#avatar#sizes#scale
3 फ्रेमवर्कशुरुआती
Loading…
Initials on a colour computed from the name - the same person gets the same colour on every page, with no image involved.
<!--
The JS variants compute the fill from the name; here it is written out. The
load-bearing part is the aria: role="img" + aria-label make this announce as
"Ada Lovelace", while the initials themselves are aria-hidden - "A L" spelled
out is noise, not a name.
-->
<span
role="img"
aria-label="Ada Lovelace"
class="inline-flex h-10 w-10 shrink-0 select-none items-center justify-center rounded-full bg-violet-600 text-sm font-semibold text-white"
>
<span aria-hidden="true">AL</span>
</span>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
nameआवश्यक | string | - | हेडिंग के रूप में दिखने वाला प्लान का नाम। |
size | 'sm' | 'md' | 'lg' | 'md' | Size |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
The hash is for stability, not security: it only exists so "Ada Lovelace" lands on the same swatch everywhere she appears instead of a random one per render, which also means it is safe in Server Components - same input, same output, no hydration mismatch. Extend `FILLS` freely, but keep every entry one complete class string: Tailwind’s scanner only keeps classes it can read verbatim in the source, so `bg-…` assembled from fragments silently produces an unstyled avatar. The aria is the mirror image of an `<img>`: `role="img"` + `aria-label` on the wrapper make it announce as the person, and the initials are `aria-hidden` because "A L" spelled out is noise, not a name. If you add swatches, check the text colour against each fill - `amber-500` is the one in the default set that needs dark text to clear AA.