Skip to content

VAvatar

Props

NameTypeDescription
appearanceEnum:
filled
outlined
duotone
subtle
Sets the element's appearance
clickablebooleanIndicates whether avatar should be a clickable <button> element.
connotationEnum:
accent
cta
Sets the element's connotation
downloadstringPrompts the user to save the linked URL. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
hrefstringThe URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
hreflangstringHints at the language of the referenced resource. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
iconEnum:
10-sec-backward-line
10-sec-backward-solid
10-sec-forward-line
10-sec-forward-solid
30-sec-backward-line
30-sec-backward-solid
30-sec-forward-line
30-sec-forward-solid
5-sec-backward-line
5-sec-backward-solid
5-sec-forward-line
5-sec-forward-solid
... 1266 more ...
Sets the element's icon See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
initialsstringSets the initials on the Avatar
pingstringSee https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
referrerpolicystringSee https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
relstringSee https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
shapeEnum:
rounded
pill
Sets the element's shape
sizeEnum:
condensed
normal
expanded
Sets the element's size
targetEnum:
_self
_blank
_parent
_top
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
typestringSee https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

Events

NameEvent TypeDescription
blurFocusEventFires when the element loses focus.
clickMouseEventFires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
focusFocusEventFires when the element receives focus.
inputEventFires when the value of an element has been changed.
keydownKeyboardEventFires when a key is pressed.
keyupKeyboardEventFires when a key is released.

Slots

NameDescription
graphicAssign nodes to the graphic slot to set a graphic media of any kind (e.g. image, illustration etc).
iconThe preferred way to add an icon to the component.