mirror of
https://github.com/tabler/tabler.git
synced 2026-10-21 23:34:20 +04:00
142 lines
9.8 KiB
Plaintext
142 lines
9.8 KiB
Plaintext
---
|
||
title: Avatar
|
||
summary: An avatar helps customize interface elements and make the product experience more personalized. It is often used in communication apps, collaboration tools, and social media.
|
||
description: Display user avatars with images, initials, or icons. Change sizes, shapes, and colors, or group them into stacked avatar lists.
|
||
related: [/ui/components/status, /ui/components/badge]
|
||
---
|
||
import Example from '@components/Example.astro';
|
||
import Icon from '@ui/Icon.astro';
|
||
import AvatarList from '@ui/AvatarList.astro';
|
||
import CodeDocs from '@components/CodeDocs.astro';
|
||
|
||
## Default markup
|
||
|
||
Use the `avatar` class to add an avatar to your interface design for greater customization.
|
||
|
||
<Example centered>
|
||
<AvatarList> <span class="avatar" style="background-image: url(/static/avatars/002f.jpg)"></span> <span class="avatar">JL</span> <span class="avatar" style="background-image: url(/static/avatars/004f.jpg)"></span> </AvatarList>
|
||
</Example>
|
||
|
||
## Avatar image
|
||
|
||
Set an image as the background to make users easy to indentify and create a personalized experience.
|
||
|
||
<Example centered>
|
||
<AvatarList> <span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/022m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/036m.jpg)"></span> </AvatarList>
|
||
</Example>
|
||
|
||
## Initials
|
||
|
||
You can also use initials instead of pictures.
|
||
|
||
<Example centered>
|
||
<AvatarList> <span class="avatar">AB</span> <span class="avatar">CD</span> <span class="avatar">EF</span> <span class="avatar">GH</span> <span class="avatar">IJ</span> </AvatarList>
|
||
</Example>
|
||
|
||
## Avatar icons
|
||
|
||
Besides pictures and initials, you can also use [icons](/ui/components/icon) to make the avatars more universal.
|
||
|
||
<Example centered>
|
||
<AvatarList> <span class="avatar"> <Icon name="user" /> </span> <span class="avatar"> <Icon name="plus" /> </span> <span class="avatar"> <Icon name="settings" /> </span> </AvatarList>
|
||
</Example>
|
||
|
||
## Avatar initials color
|
||
|
||
Customize the color of the avatars' background. See the [full list of available colors](/ui/base/colors) for more details.
|
||
|
||
<Example centered>
|
||
<AvatarList> <span class="avatar bg-green-lt">AB</span> <span class="avatar bg-red-lt">CD</span> <span class="avatar bg-yellow-lt">EF</span> <span class="avatar bg-primary-lt">GH</span> <span class="avatar bg-purple-lt">IJ</span> </AvatarList>
|
||
</Example>
|
||
|
||
## Avatar size
|
||
|
||
Using Bootstrap’s typical naming structure, you can create a standard avatar or scale it up or down to different sizes based on what you need.
|
||
|
||
<Example centered>
|
||
<AvatarList> <span class="avatar avatar-xl" style="background-image: url(/static/avatars/000m.jpg)"></span> <span class="avatar avatar-lg" style="background-image: url(/static/avatars/000m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/000m.jpg)"></span> <span class="avatar avatar-sm" style="background-image: url(/static/avatars/000m.jpg)"></span> <span class="avatar avatar-xs" style="background-image: url(/static/avatars/000m.jpg)"></span> </AvatarList>
|
||
</Example>
|
||
|
||
## Avatar status
|
||
|
||
Add a [status indicator](/ui/components/status) to your avatar to show, for instance, if a user is online or offline or indicate the number of messages they have received.
|
||
|
||
<Example centered>
|
||
<AvatarList> <span class="avatar" style="background-image: url(/static/avatars/018m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/015m.jpg)"> <span class="badge bg-danger"></span> </span> <span class="avatar" style="background-image: url(/static/avatars/022m.jpg)"> <span class="badge bg-success"></span> </span> <span class="avatar"> <span class="badge bg-warning"></span>SA </span> <span class="avatar" style="background-image: url(/static/avatars/022m.jpg)"> <span class="badge bg-info"></span> </span> <span class="avatar" style="background-image: url(/static/avatars/048m.jpg)"> <span class="badge bg-gray">5</span> </span> </AvatarList>
|
||
</Example>
|
||
|
||
## Avatar shape
|
||
|
||
Change the shape of an avatar with the default Bootstrap image classes. You can make them round or square and change their border radius.
|
||
|
||
<Example centered>
|
||
<AvatarList> <span class="avatar" style="background-image: url(/static/avatars/019m.jpg)"></span> <span class="avatar rounded" style="background-image: url(/static/avatars/039f.jpg)"></span> <span class="avatar rounded-circle">AA</span> <span class="avatar rounded-0" style="background-image: url(/static/avatars/043f.jpg)"></span> <span class="avatar rounded-3" style="background-image: url(/static/avatars/044f.jpg)"></span> </AvatarList>
|
||
</Example>
|
||
|
||
## Avatar upload
|
||
|
||
Use the `avatar-upload` class together with `avatar` to show an empty avatar slot. It has a dashed border and no image, so users can see that the picture is still missing. On hover the border and the icon turn to the primary color.
|
||
|
||
Put an icon inside to show the action. The variant is often used as a link or a button.
|
||
|
||
<Example centered>
|
||
<AvatarList> <a href="#" class="avatar avatar-upload"> <Icon name="plus" /> </a> <a href="#" class="avatar avatar-upload rounded"> <Icon name="plus" /> </a> <a href="#" class="avatar avatar-upload rounded-0"> <Icon name="camera" /> </a> </AvatarList>
|
||
</Example>
|
||
|
||
## Avatar upload size
|
||
|
||
The upload avatar uses the same size classes as a normal avatar, from `avatar-xxs` to `avatar-2xl`.
|
||
|
||
<Example centered>
|
||
<AvatarList> <a href="#" class="avatar avatar-upload avatar-2xl rounded"> <Icon name="plus" /> </a> <a href="#" class="avatar avatar-upload avatar-xl rounded"> <Icon name="plus" /> </a> <a href="#" class="avatar avatar-upload avatar-lg rounded"> <Icon name="plus" /> </a> <a href="#" class="avatar avatar-upload rounded"> <Icon name="plus" /> </a> <a href="#" class="avatar avatar-upload avatar-sm rounded"> <Icon name="plus" /> </a> </AvatarList>
|
||
</Example>
|
||
|
||
## Avatar upload text
|
||
|
||
Add a short label under the icon with the `avatar-upload-text` class. The content is stacked in a column, so use this only in the larger sizes. The text is shown in uppercase, like all avatar text.
|
||
|
||
<Example centered>
|
||
<AvatarList> <a href="#" class="avatar avatar-upload avatar-xl rounded"> <Icon name="plus" /> <span class="avatar-upload-text">Upload</span> </a> <a href="#" class="avatar avatar-upload avatar-2xl rounded"> <Icon name="camera" /> <span class="avatar-upload-text">Add photo</span> </a> </AvatarList>
|
||
</Example>
|
||
|
||
## Avatar upload in a form
|
||
|
||
To pick a real file, use a `label` with the upload classes and connect it to a hidden file input. Add `cursor-pointer`, because the pointer cursor is only set for links.
|
||
|
||
<Example>
|
||
<div class="row align-items-end" style="width: 100%;"> <div class="col-auto"> <label for="avatar-file" class="avatar avatar-upload avatar-lg rounded cursor-pointer"> <Icon name="plus" /> </label> <input type="file" id="avatar-file" class="visually-hidden" accept="image/*" /> </div> <div class="col"> <label class="form-label" for="avatar-file">Avatar</label> <div class="text-secondary">Click to upload a new avatar</div> </div> </div>
|
||
</Example>
|
||
|
||
## Avatar list
|
||
|
||
Use the `.avatar-list` container to create a list of avatars within one parent container. It keeps consistent spacing between items and wraps them when there is not enough space.
|
||
|
||
<Example centered>
|
||
<AvatarList> <span class="avatar rounded" style="background-image: url(/static/avatars/031f.jpg)"></span> <span class="avatar rounded">JL</span> <span class="avatar rounded" style="background-image: url(/static/avatars/033f.jpg)"></span> <span class="avatar rounded" style="background-image: url(/static/avatars/017m.jpg)"></span> <span class="avatar rounded" style="background-image: url(/static/avatars/024m.jpg)"></span> </AvatarList>
|
||
</Example>
|
||
|
||
## Stacked list
|
||
|
||
Make the list stack once a certain number of avatars is reached to make it look clear and display well regardless of the screen size.
|
||
|
||
<Example centered>
|
||
<AvatarList stacked={true}> <span class="avatar">EB</span> <span class="avatar" style="background-image: url(/static/avatars/026m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/028m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/030m.jpg)"></span> <span class="avatar">+8</span> </AvatarList>
|
||
</Example>
|
||
|
||
<Example centered>
|
||
<AvatarList stacked={true}> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/035m.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/027f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/036f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle">SA</span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/034f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/043f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/039f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/020m.jpg)" ></span> </AvatarList>
|
||
</Example>
|
||
|
||
## Accessibility
|
||
|
||
- An avatar with a background image has no text of its own. Show the user name next to it, or add an `aria-label` to the avatar.
|
||
- Give the upload avatar a clear name. Use the `avatar-upload-text` label, an `aria-label`, or a `form-label` linked with `for`.
|
||
- Use a `label` with a file input, or a `button`, when the upload avatar does something. A link with `href="#"` is only good for a static demo.
|
||
- Keep the hidden file input in the markup with the `visually-hidden` class. Do not use `display: none`, because then keyboard users cannot reach it.
|
||
|
||
## SCSS variables
|
||
|
||
Use these SCSS variables to customize avatars. The default values are:
|
||
|
||
<CodeDocs name="avatar-variables" file="core/scss/_variables.scss" />
|