Styling contract
Headless Avatar gives you slot hooks only. Any size, shape, radius, border, or typography system lives in your own classes and attributes.
Slot hooks
| Hook | Source | Use it for |
|---|---|---|
[data-slot='avatar'] | tngAvatar host | Frame, border, background, radius, and sizing. |
[data-slot='avatar-image'] | tngAvatarImage | Object fit, filters, cropping, and hidden/image transitions. |
[data-slot='avatar-fallback'] | tngAvatarFallback | Initials, icon styling, and fallback background treatment. |
CSS starter
Start by styling your chosen host class. The primitive does not inject any visual CSS for you.
headless-avatar.css
css
.profile-avatar {
background: var(--tng-semantic-background-surface);
border: 1px solid var(--tng-semantic-border-subtle);
border-radius: 9999px;
display: inline-flex;
height: 2.75rem;
overflow: hidden;
position: relative;
width: 2.75rem;
}
.profile-avatar [data-slot="avatar-image"] {
height: 100%;
object-fit: cover;
width: 100%;
}
Sizing and shape guidance
If you want a reusable contract like data-size or data-shape, add and style those attributes yourself. They are not part of the primitive by default.
avatar.tokens.css
css
.profile-avatar[data-size="sm"] {
height: 2rem;
width: 2rem;
}
.profile-avatar[data-shape="square"] {
border-radius: 0.75rem;
}