Avatar
Circular accent-filled initials badge.
Preview
Initials
JD
<span class="nx-avatar">JD</span><NxAvatar>JD</NxAvatar>API
Classes
| Class | Description |
|---|---|
.nx-avatar | Circle, accent fill, on-accent text, .8rem/700 |
Accessibility
- Decorative shorthand — pair with a visible name nearby (row title, header) rather than relying on initials alone for identity.
Do / Don’t
- Do: Use 1-2 uppercase initials.Don’t: Don't use it as the sole identifier for a person/team — always show the full name somewhere on the surface.