Avatar
Avatars are used to display a user’s profile image or initials. If an initials property is passed,
it will be used as the value of the image element’s alt attribute and as the backup display in
case no image src is passed. Alternatively, a name attribute can be passed from which initials
will be derived automatically.
Example
A basic avatar with an image source. The provided image does not need to be a circle, the avatar will be clipped to a circle automatically.
<script>
import { Avatar } from '$lib/ui';
</script>
<Avatar src="./dave.jpg" />
Sizes
The default size is md (medium) as shown above. The size property can be used to set the size as
defined in style.css. Note that the size of the avatar can also be set using the --ui-avatar-size CSS Style Prop.
<Avatar src="./bob.jpg" size="xs" />
<Avatar src="./jane.jpg" size="sm" />
<Avatar src="./dave.jpg" size="md" />
<Avatar src="./susan.jpg" size="lg" />
<Avatar src="./lynn.jpg" size="xl" />
Initials
Supplied initials will be used as the value of the image element’s alt attribute and as the backup
display in case no src image is passed. Initials are automatically uppercased and only the first
two letters are used.
<Avatar initials="ck" />Name
Instead of passing initials, a name property can be passed from which initials can be derived
for backup display. If present, the name property is also used as the value of the image element’s alt attribute.
<Avatar name="Michael Jackson" />Avatar Component Props
| Name | Type | Default | Description |
|---|---|---|---|
src | String | URL (either relative or full URL) to the image file to use in avatar. Preferably 1:1 aspect ratio. Does not need to be cropped to a circle | |
size | String: 'xs', 'sm', 'md', 'lg', or 'xl' | 'md' | Sets the the size of the avatar |
initials | String | Initials to display if src is falsey. Also used as value of alt attribute | |
name | String | Initials automatically derived from name to display if src is falsey. Also
used as value of alt attribute | |
alt | String | Value of alt attribute in avatar image element (defaults to value of name or initials) | |
class | String | CSS classes declared in global scope can be applied to the outermost element | |
... | Additional props will be passed through to the HTML element enabling support for things
like on:click, etc |
Avatar CSS Custom Properties
| Name | Type | Default | Description |
|---|---|---|---|
--ui-avatar-size | Numeric | 84px | Arbitrary size of Avatar (overrides size prop) |
--ui-avatar-font-size | Numeric | calc(--ui-avatar-size/2.2) | Size used for initials |
--ui-avatar-color | Color | --ui-dark or #1e293b | Color used for initials |
--ui-avatar-background | Color | --ui-light or #e2e8f0 | Color used for initials background |
--ui-avatar-border-width | Numeric | 0 | Avatar border width |
--ui-avatar-border-color | Color | none | Avatar border color |