Components · Data Display
Avatar
A circular picture or initials for a person or team, with an optional status dot.
Component Workbench
Switch between the live interactive preview, syntax-highlighted implementation code, copyable AI coding agent prompt, and designer anatomy blueprint.
Avatar · Canonical Spec
MCSLAR
<span class="as-avatar" role="img" aria-label="Maya Chen, online">
MC
<span class="as-avatar__status"></span>
</span>
<span class="as-avatar as-avatar--lg">
<img class="as-avatar__image" src="/maya.jpg" alt="Maya Chen">
</span># Aster Component Implementation Prompt — Avatar ## 1. Component Purpose & Canonical Role - **Component:** Avatar (`avatar`) - **Category:** Data Display - **Native Element:** `<span role="img">` - **Summary:** A circular picture or initials for a person or team, with an optional status dot. - **When to Use:** Showing who a person or team is, in lists, comments, and headers. - **When Not to Use:** Generic icons or logos with no person or team behind them. ## 2. Authoritative Repository Files - **Component CSS:** `components/avatar/avatar.css` - **Component Spec:** `docs/components/avatar.md` - **Agent Contract:** `skills/using-aster-components/SKILL.md` - **Compiled Bundle:** `dist/css/aster.css` ## 3. Canonical HTML Structure & Classes ```html <span class="as-avatar" role="img" aria-label="Maya Chen, online"> MC <span class="as-avatar__status"></span> </span> <span class="as-avatar as-avatar--lg"> <img class="as-avatar__image" src="/maya.jpg" alt="Maya Chen"> </span> ``` ## 4. Measured Geometry Measured from the rendered component when this page loads. ## 5. Non-Negotiable Aster Constraints 1. Bind colors to `--as-semantic-color-*` tokens, never primitives or hex values. 2. Use the radius tokens, with 4px as the smallest component radius. 3. Aster has one standard density, with no compact mode. 4. Keep text at 4.5:1 contrast and interactive elements keyboard operable. ## 6. Verification Commands ```bash npm run test:components npm run test:browser ```
When to use it
Do
- Add the person's name as a text alternative.
- Include any status in that text too.
Don't
- Use it for generic icons or logos.
- Rely on the dot color alone to show status.
Variants & States
Every option, rendered live with real styles.
Accessibility & Keyboard Interaction
Requirements for using this component accessibly.
| Topic | Requirement |
|---|---|
| Text alternative | Images need alt. Initials need role="img" and aria-label. |
| Status | Include status in the accessible name. |
| Clickable | Wrap in a native button or link. |
Tokens
Values update with the current theme.
| Role | Token | Current value |
|---|---|---|
| Background | --as-semantic-color-surface-subtle | |
| Initials | --as-semantic-color-text-default | |
| Radius | --as-radius-full |