Avatar Label

🧭 When to Use Avatar with Label

Use when:

• You need to pair a face/icon with a name, role, or tag

• You want to show a person, team, or product with clear visual and textual representation

• Clarity is important in dense UIs or collaborative systems (e.g., messaging, task assignment)

Avoid using it when:

• Space is extremely limited and visual identity alone suffices (use plain Avatar instead)

• The avatar is decorative and doesn’t require explanation (e.g., inline icon chips)

🎨 Types

Same as Avatar:

• Image – Profile picture or logo

• Initials – Fallback using 1–2 characters

• Icon – Symbol used when identity doesn’t map to a person (e.g., team, bot, org)

The image/icon sits alongside or above the label depending on layout direction (horizontal or vertical).

📏 Sizes

• Extra Small (xsm)

• Small (sm)

• Medium (md) – Default system size

• Large (lg)

• Extra Large (xl)

• XXL (xxl)

These sizes affect both the avatar and the label type scale and spacing. Labels scale proportionally with avatar size unless overridden.

✨ Modifiers

• None – Clean label + avatar pairing

• Dot – Status indicator on avatar

• Logo – Background or indicator showing this is a brand, not a person

Modifiers reflect visual meaning only and don't affect label behavior.

🎯 States

• Default – Neutral, no effects

• Outline – Stroke around avatar for visibility

• Shadow – Adds depth/elevation; good for hoverable cards or sticky headers

States apply to the avatar itself and don't affect the label unless styled together.

🧾 Label Details

The Label component includes:

• Primary label – e.g., “Jane Doe”, “Marketing Team”, “Slackbot”

• Optional subtext – e.g., role, location, or status (“Designer”, “Offline”, “Toronto”)

Subtext is toggleable in Figma via a layer property and styled with muted tokens for clarity.

You can stack these vertically or align them horizontally depending on layout needs.

♿ Accessibility Considerations

From a design perspective:

• Ensure text is legible at smaller sizes

• Maintain clear spacing between avatar and label

• Use consistent alignment (e.g., left-align for vertical stacks, center for horizontal)

From a code perspective (if implemented):

• Wrap the entire component in a semantic container

• Use alt text or aria-label on the avatar

• Ensure both the avatar and label are announced if interactive (e.g., assigned user button)

✅ Best Practices

• Truncate labels if width-constrained; show full name on hover

• Use labels for disambiguation in group UIs (especially when initials/images repeat)

• Align labels consistently based on context (e.g., left in lists, centered in cards)

• Avoid combining dot + subtext for the same message — pick one form of presence/state

• Use label + avatar as a button or link when the whole unit is interactive