Official Partner of
Nuxt
๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ 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.

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.

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.

Open in GitHub

Square
#

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

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.

Open in GitHub

Grouped
#

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

Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
alt

String

""

color

String

"primary"

fallbackIcon

String

-

fallbackRender

Function

-

fallbackSrc

String

-

fallbackText

String

-

fontSize

String

""

fontSizesConfig

Object

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

String

""

loading

Boolean

false

preset

String

-

size

String | Number

""

sizesConfig

Object

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

Boolean

false

src

String

null

textColor

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%