Avatar
Avatars represent a person in the interface. They help people identify context or ownership at a glance.
This page documents the EMR user avatar (UserAvatar): a circle for staff, clinicians, and the logged-in user. Patient avatars (rounded square) are a separate pattern and are not this component.
Anatomy
- Container: The circular surface that holds the avatar content.
- Illustration: Optional character art the user picked.
- Initials fallback: The practice username when there is no illustration.
- Instinct logo: Default for Instinct support users who have not picked an avatar.
Sizes
Accents
Illustrations
Fallbacks
Instinct support
Usage
Avatars appear where the interface needs to communicate identity or ownership quickly. Custom avatars are rolling out behind the DEV_custom_user_avatar flag, so the surfaces below may still show their previous treatment when the flag is off.
Navigation and account
- Primary sidebar: The logged-in user's avatar sits at the bottom. Clicking it opens a flyout with profile settings and account actions.
- TV mode bar: The logged-in user's avatar opens their settings.
- Dashboard header: Greets the logged-in user.
- Account settings: The account card shows the user's avatar. The avatar editor is where they pick an illustration and accent.
Patient visit
- Patient info bar: Shows the visit doctor, plus the care team as a wrapping grid of avatars with an Add button to assign more people.
- Treatment sheet: The doctor field on sheet orders.
- Estimates: The provider dropdown.
- Invoice: The doctor dropdown when adding or editing a line item.
Scheduling
- Appointment panel: The provider dropdown.
- Appointments: The Users filter dropdown.
Admin
- Staff page: Staff search results show each person's avatar. The staff member modal has a Profile tab with the avatar picker, so admins can set an avatar for someone else.
Records and activity
- Tasks: Assignee avatars and the assignee picker.
- Chart audit log: The person who made each revision.
- Digital form review: The person who approved the form.
In dropdowns
In person dropdowns, the avatar comes before the name, both in each option and in the selected value.
Don't use avatars as decorative elements or for non-identity imagery.
Best practices
| Do | Don't |
|---|---|
| Use avatars for quick visual identification of a person | Don't use avatars for decorative or non-identity imagery |
| Keep the 1:1 circle at the defined sizes | Don't introduce arbitrary sizing |
| Show initials or the Instinct logo when there is no illustration | Don't leave an avatar empty when an image fails to load |
Accessibility
- Provide text alternatives (
altoraria-label) describing the person. - Keep sufficient contrast between the accent background and initials.
- Interactive avatars (menus) need a visible focus ring and keyboard access.
- Initials should be programmatically available to assistive tech, e.g.
aria-label="Michael Lund".