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

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

String

""

color

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

String

"primary"

fallback-icon

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

String

-

fallback-render

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

Function

-

fallback-src

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

String

-

fallback-text

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

String

-

font-size

The font-size of text inside avatar

String

""

font-sizes-config

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

-

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

""

sizes-config

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

text-color

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%