User
Examples
Overflow Ellipsis
Fun with Flags
Indicators
Avatar only
Avatar shape
Copy user id
Links
Importing
Slots
Properties
Custom Properties
Parts
Dependencies

User

<sl-user> | SlUser

Since 2.46.0

stable

Render Avatar with user info.

Custom subtext

<sl-user image="https://picsum.photos/100" name="Frank Drebin"></sl-user>
<br>
<br>
<sl-user image="https://picsum.photos/100" name="Frank Drebin" pseudonym="Police Squad" userId="fr1234567"></sl-user>
<br>
<br>
<sl-user image="https://picsum.photos/100" name="Frank Drebin" pseudonym="Police Squad" userId="fr1234567">
  <span>Custom subtext</span>
</sl-user>

Examples

Overflow Ellipsis

A long custom subtext with more length than available space won’t get cropped with an ellipsis. And that is good.

<div style="width: 250px; overflow: hidden;">
<sl-user
  image="https://picsum.photos/100"
  name="Hadschi Halef Omar Ben Hadschi Abul Abbas Ibn Hadschi Dawuhd al Gossarah"
  pseudonym="Hubert Blaine Wolfeschlegelsteinhausenbergerdorff Sr"
></sl-user>
<br>
<br>
<sl-user image="https://picsum.photos/100" name="Frank Drebin" style="--align: top">
  <span>A long custom subtext with more length than available space won't get cropped with an ellipsis. And that is good.</span>
</sl-user>
</div>

Fun with Flags

Custom subtext

<sl-user image="https://picsum.photos/100" name="Frank Drebin">
  <sl-tooltip slot="country-flag" content="Germany"><sl-icon name="cif:de"></sl-icon></sl-tooltip>
</sl-user>
<br>
<br>
<sl-user image="https://picsum.photos/100" name="Frank Drebin" pseudonym="Police Squad">
  <sl-tooltip slot="country-flag" content="Bulgaria"><sl-icon name="cif:bg"></sl-icon></sl-tooltip>
</sl-user>
<br>
<br>
<sl-user image="https://picsum.photos/100" name="Frank Drebin" pseudonym="Police Squad" userID="fr1234567">
  <sl-tooltip slot="country-flag" content="Czech"><sl-icon name="cif:cz"></sl-icon></sl-tooltip>
</sl-user>
<br>
<br>
<sl-user image="https://picsum.photos/100" name="Frank Drebin" pseudonym="Police Squad" userId="fr1234567">
  <sl-tooltip slot="country-flag" content="USA"><sl-icon name="cif:us"></sl-icon></sl-tooltip>
  <span>Custom subtext</span>
</sl-user>

Indicators

Content for default slot

<sl-user image="https://picsum.photos/100" name="Frank Drebin">
  <sl-badge slot="avatar-indicator" pulse>2</sl-badge>
</sl-user>
<br>
<br>
<sl-user image="https://picsum.photos/100" name="Frank Drebin" pseudonym="Police Squad">
  <sl-tooltip slot="avatar-indicator" content="First place"><sl-icon name="mdi:trophy"></sl-icon></sl-tooltip>
  <sl-tooltip slot="country-flag" content="Bulgaria"><sl-icon name="cif:bg"></sl-icon></sl-tooltip>
  Content for default slot
</sl-user>

Avatar only

avatarOnly can be used to eg have the info part toggle reactively or just to have this component’s slots like country-flag and avatar-indicator available, which sl-avatar hasn’t.

<sl-user image="https://picsum.photos/100" name="Name serves only accessibility" avatarOnly></sl-user>

Avatar shape

see avatar shapes

Copy user id

<sl-user image="https://picsum.photos/100" name="Frank Drebin" userId="fr1234567" showUserIdCopyButton copyButtonLabel="Copy user id to clipboard" copyButtonSuccessLabel="Well done!"></sl-user>

Links

Either wrap the whole component in a link or use the default slot to place a link inside it.

Visit his profile

<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank">
  <sl-user image="https://picsum.photos/100" name="See Frank Drebins' Profile" pseudonym="Police Squad" userId="fr1234567"></sl-user>
</a>
<br><br>
<sl-user image="https://picsum.photos/100" name="Frank Drebin">
  <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Visit his profile</a>
</sl-user>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script

Import

Bundler

React

To import this component from the CDN using a script tag:

<script type="module" src="https://v2-48-10.yoummday-theme.pages.dev/components/user/user.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://v2-48-10.yoummday-theme.pages.dev/components/user/user.js';

To import this component using a bundler:

import '@yoummday/ymmd-shoelace/dist/components/user/user.js';

To import this component as a React component:

import SlUser from '@yoummday/ymmd-shoelace/dist/react/user';

Slots

Name	Description
(default)	The default slot. Pass content to override everything in the text section despite user name.
`country-flag`	Render a country flag sl-icon on the bottom right of the avatar.
`avatar-indicator`	Render eg an icon or badge on the top right of the avatar.

Learn more about using slots.

Properties

Name	Description	Type	Default
`image`	The image url of the avatar.	`string \| undefined`	-
`avatarShape`	The shape of the avatar. See avatar component for more details.	`SlAvatar['shape']`	`'circle'`
`name`	The name of the user.	`string \| undefined`	-
`pseudonym`	The pseudonym of the user.	`string \| undefined`	-
`userId`	The user id of the user.	`string \| undefined`	-
`showUserIdCopyButton`	Whether to show the user id copy button.	`boolean`	`false`
`copyButtonLabel`	The label of the copy button.	`string`	`''`
`copyButtonSuccessLabel`	The success label of the copy button.	`string`	`''`
`avatarOnly`	Whether to hide the whole info section and only show the avatar.	`boolean`	`false`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Custom Properties

Name	Description	Default
`--avatar-size`	The size of the avatar.

Learn more about customizing CSS custom properties.

Parts

Name	Description
`base`	The component’s base wrapper.
`avatar`	The avatar.
`info`	The right column text wrapper.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

<sl-avatar>
<sl-icon>