Epicmax - We are the core team behind Vuestic UI and Vuestic Admin and frontend development company specializing in Vue.js since our founding in 2017.
🔥🔥🔥 Hire us

Avatar
#

va-avatar component is typically used for user profile pictures. The component helps you display it in different sizes consistently throughout your web application.

Examples
#

Default
#

By default va-avatar is displayed as a circle container.

A
J.K.
Open in GitHub

With image
#

The src prop is used to add custom image to a component.

Open in GitHub

Fallback
#

You can set fallback image.

Open in GitHub

Integrate with Gravatar
#

You can easily use Gravatar with VaAvatar component.

Open in GitHub

With icon
#

The icon prop is used to display icon inside an avatar.

Open in GitHub

Different colors
#

The color prop is used to set the color of the component and text-color for its textual content.

J.D.
J.D.
J.D.
J.D.
J.D.
J.D.
J.D.
Open in GitHub

Different sizes
#

The size prop allows you to specify custom size for an avatar. By default, font size will be scaled depending on the value of the size prop. But you can use the font-size prop to force text size you need.

S
M
L
Open in GitHub

Square
#

The square prop is used to change components form from round to square.

A
Open in GitHub

Loading
#

The loading prop sets a loading state for the component via spinner icon.

Open in GitHub

With badge
#

You may combine va-avatar with va-badge, for example, to output amount of the new notifications.

15
Open in GitHub

Grouped
#

You can use va-avatar-group component to group avatars.

+2
Open in GitHub

Accessibility
#

Women
J.D.
Jane Doe
Open in GitHub
  • When image used as source, provide its description to the alt prop.
  • Use title attribute when icon name is passed.
  • Use aria-hidden="true" attribute, if associated text is quite descriptive.

API
#

Props #

NameDescriptionTypesDefault
alt

Specifies an alternate text for an avatar image (not icon)

String

""

color

Color of the component (theme string or HEX string).

String

"primary"

fallbackIcon

Shows an icon if image failed to load or src doesn't specified.

String

-

fallbackRender

Allows to use render function to render custom contents if image failed to load or src doesn't specified

Function

-

fallbackSrc

Shows an alternative image if original image failed to load or src doesn't specified.

String

-

fallbackText

Shows an alternative text if image failed to load or src doesn't specified.

String

-

fontSize

The font-size of text inside avatar

String

""

fontSizesConfig

Provide a set of sizes for fonts as a global component specific setting.

Object

{
  "defaultSize": 1,
  "sizes": {
    "small": 0.75,
    "medium": 1,
    "large": 1.25
  }
}
icon

The icon to be displayed inside a container

String

""

loading

Indicates that something is loading (spinner icon).

Boolean

false

preset

Named preset combination of component props.

String | Array

-

size

Specify size for component. "small", "medium", "large" sizes are available. If you want more control, you can provide number (will be used as px) or string value (rem and px sizes are supported).

String | Number

""

sizesConfig

Provide a set of sizes as a global component specific setting.

Object

{
  "defaultSize": 48,
  "sizes": {
    "small": 32,
    "medium": 48,
    "large": 64
  }
}
square

Removes rounded corners.

Boolean

false

src

URL to the image (will be placed inside src attribute of image tag)

String

null

textColor

Text color (theme string or HEX string).

String

-

Events #

NameDescription

error

Triggers when failed to load an image. The event argument is:

Error

fallback

Slots #

NameDescription

default

Use this slot to replace default content to be displayed inside the component

Css Variables #

NameDefault Value
--va-avatar-display inline-flex
--va-avatar-align-items center
--va-avatar-justify-content center
--va-avatar-text-align center
--va-avatar-vertical-align middle
--va-avatar-position relative
--va-avatar-line-height normal
--va-avatar-border-radius 50%
--va-avatar-object-fit cover