User

<wa-user>

Experimental

added

Displays an avatar with a user's identity and optional secondary details.

<wa-user initials="FD" name="Frank Drebin"></wa-user>

Examples

Link to This Section

Secondary details

Link to This Section

Use pseudonym and user-id for the built-in details.

<wa-user initials="FD" name="Frank Drebin" pseudonym="Police Squad" user-id="fr1234567"></wa-user>

Custom details

Link to This Section

Default-slot content replaces the built-in pseudonym and user ID while preserving the name.

View profile

<wa-user initials="FD" name="Frank Drebin" pseudonym="Police Squad" user-id="fr1234567">
  <a href="#profile">View profile</a>
</wa-user>

Copy user ID

Link to This Section

Add with-copy to show the current Web Awesome copy button.

<wa-user
  initials="FD"
  name="Frank Drebin"
  user-id="fr1234567"
  with-copy
  copy-label="Copy user ID"
  success-label="User ID copied"
></wa-user>

Avatar decorations

Link to This Section

Use avatar-badge for a bottom decoration and avatar-indicator for a top decoration.

  
    🇩🇪
  
    Online

<div class="wa-cluster wa-gap-l">
  <wa-user initials="FD" name="Frank Drebin">
    <span slot="avatar-badge" aria-label="Germany">🇩🇪</span>
  </wa-user>

  <wa-user initials="FD" name="Frank Drebin">
    <wa-badge slot="avatar-indicator" variant="success" pill>Online</wa-badge>
  </wa-user>
</div>

Avatar only

Link to This Section

Use avatar-only when only the decorated avatar is needed. The name remains its accessible label.

<wa-user avatar-only initials="FD" name="Frank Drebin">
  <wa-badge slot="avatar-indicator" variant="brand" pill>2</wa-badge>
</wa-user>

Avatar images and shapes

Link to This Section

image, shape, and loading follow the current avatar interface.

<div class="wa-cluster wa-gap-l">
  <wa-user
    image="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=100&q=80"
    name="Circle avatar"
  ></wa-user>
  <wa-user initials="FD" shape="rounded" name="Rounded avatar"></wa-user>
  <wa-user initials="FD" shape="square" name="Square avatar"></wa-user>
</div>

Overflow and alignment

Link to This Section

Names and built-in details truncate when constrained. Use valid align-items values with --align.

<div style="width: 15rem; overflow: hidden;">
  <wa-user
    initials="HH"
    name="Hadschi Halef Omar Ben Hadschi Abul Abbas"
    pseudonym="A very long pseudonym"
    style="--align: start;"
  ></wa-user>
</div>

Notes

Link to This Section

Override --avatar-size to resize the avatar.
--max-width constrains the entire component; it defaults to 100%.
fallback-name defaults to Deleted user when name is empty.
Copy-button clicks do not bubble beyond the component, which keeps wrapping links and row actions from firing.

API

Link to This Section

Importing

Link to This Section

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.

CDN

npm

Self-Hosted

React

Import this component directly from the CDN:

import 'https://cdn.yoummday.com/packages/@yoummday/webawesome/0.5.1/dist/components/user/user.js';

After installing Web Awesome via npm, import this component:

import '@yoummday/webawesome/dist/components/user/user.js';

If you're self-hosting Web Awesome, import this component from your server:

import './webawesome/dist/components/user/user.js';

To import this component for React 18 or below, use the following code:

import WaUser from '@yoummday/webawesome/dist/react/user/index.js';

Slots

Link to This Section

Learn more about using slots.

Name	Description
(default)	Replaces the default pseudonym and user ID details while preserving the name.
`avatar-badge`	Places a flag, badge, or other decoration at the avatar's bottom inline end.
`avatar-indicator`	Places a status or rank indicator at the avatar's top inline end.

Attributes & Properties

Link to This Section

Learn more about attributes and properties.

Name	Description	Reflects
`avatarOnly` `avatar-only`	Hides the details and displays only the decorated avatar. Type `boolean` Default `false`
`copyLabel` `copy-label`	Accessible label and tooltip for the copy button. Type `string` Default `''`
`fallbackName` `fallback-name`	Text displayed when no name is available. Type `string` Default `'Deleted user'`
`image` `image`	The avatar image URL. Type `string` Default `''`
`initials` `initials`	Initials shown when no avatar image is available. Type `string` Default `''`
`loading` `loading`	Indicates how the browser should load the avatar image. Type `'eager' \| 'lazy'` Default `'lazy'`
`name` `name`	The user's display name. Type `string` Default `''`
`pseudonym` `pseudonym`	The user's pseudonym. Type `string` Default `''`
`shape` `shape`	The avatar's shape. Type `'circle' \| 'square' \| 'rounded'` Default `'circle'`
`successLabel` `success-label`	Feedback label shown after the user ID is copied. Type `string` Default `''`
`userId` `user-id`	The user's ID. Type `string` Default `''`
`withCopy` `with-copy`	Shows a copy button beside the user ID. Type `boolean` Default `false`

CSS Custom Properties

Link to This Section

Learn more about CSS custom properties.

Name	Description
`--align`	The avatar and details' cross-axis alignment. Default `center`
`--avatar-size`	The avatar's width and height. Default `3rem`
`--max-width`	The component's maximum width. Default `100%`

CSS Parts

Link to This Section

Learn more about CSS parts.

Name	Description	CSS selector
`avatar`	The avatar component.	`::part(avatar)`
`avatar-wrapper`	The avatar and decoration container.	`::part(avatar-wrapper)`
`copy-button`	The user ID copy button.	`::part(copy-button)`
`info`	The text details container.	`::part(info)`
`name`	The display name.	`::part(name)`
`pseudonym`	The pseudonym.	`::part(pseudonym)`
`user`	The component's outer wrapper.	`::part(user)`
`user-id`	The user ID row.	`::part(user-id)`
`user-id-value`	The user ID text.	`::part(user-id-value)`
`base`	An alias for the component's outer wrapper.	`::part(base)`

Dependencies

Link to This Section

This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.

Need a hand?

Report a bug

Ask for help

User

Examples

Secondary details

Custom details

Copy user ID

Avatar decorations

Avatar only

Avatar images and shapes

Overflow and alignment

Notes

API

Importing

Slots

Attributes & Properties

CSS Custom Properties

CSS Parts

Dependencies

Quick Links

Recent Searches