Styling contract
Style the wrapper through the stable attributes on the rendered avatar shell and slot nodes, rather than depending on extra local classes on <tng-avatar> itself.
Wrapper state hooks
| Attribute | Values | Usage |
|---|---|---|
data-shape | circle | square | Controls shell geometry on the internal .tng-avatar element. |
data-size | sm | md | lg | Controls wrapper dimensions and fallback text scale. |
data-slot | avatar | avatar-image | avatar-fallback | Targets shell, image, and fallback nodes. |
hidden | Applied to image or fallback | Reflects which visual layer is currently active. |
Wrapper shell
:hostisinline-flex, so surrounding spacing still belongs to the parent layout.- The internal shell is
.tng-avatarand carriesdata-sizeanddata-shape. - The wrapper already manages
[hidden]on image and fallback slots when sources change.
Owner guidance
Override the wrapper by targeting the internal shell under tng-avatar. If you need custom host structure or owner-managed fallback visibility, move to the headless Avatar page.
avatar.contract.css
css
tng-avatar > .tng-avatar[data-size="lg"] {
box-shadow: 0 0 0 4px color-mix(in srgb, var(--tng-semantic-accent-brand) 12%, transparent);
}
tng-avatar > .tng-avatar[data-shape="square"] {
border-radius: 1rem;
}
tng-avatar > .tng-avatar [data-slot="avatar-fallback"] {
background: color-mix(in srgb, var(--tng-semantic-accent-brand) 10%, transparent);
}