GitHubContribution
v1.6.3

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
loading

Indicates that something is loading (spinner icon).

Boolean

false

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

Object

{
  "defaultSize": 48,
  "sizes": {
    "small": 32,
    "medium": 48,
    "large": 64
  }
}
font-sizes-config

Object

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

Named preset combination of component props.

String

-

color

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

String

"primary"

text-color

Text color (theme string or HEX string).

String

-

square

Removes rounded corners.

Boolean

false

font-size

The font-size of text inside avatar

String

""

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

-

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

-

src

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

String

null

icon

The icon to be displayed inside a container

String

""

alt

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

String

""

Events #

NameDescription

error

Triggers when failed to load an image

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%