Avatar

BsAvatar is a component which are typically used to display a user profile as a picture, icon, or short text. The BsAvatar component provides several properties for customizing its appearance such as size and roundness.

Overview

BsAvatar is a lightweight component, which render inline by default, so that are vertically centered beside any adjoining plain text. It also can be used as children of other components.

BS

Styling

Shape

<bs-avatar> component comes with three predefined shape style: Circle, Rounded and Square (default). Example below will shows you how to enable Circle and Rounded shape.

BS

BS

Border

<bs-avatar> can also have border. Use border property and border-color property to adjust border thickness and its color.

Added since v2.0.3

BS

BS

Sizes

By default <bs-avatar> size is 48px. You can change the size of the <bs-avatar> by changing the size property explicitly. Numbers will get converted to pixel. Any other value must include the units (such as px, em, or rem). You can also create an avatar with different height and width by explicitly define the height and width property.

Updated on v2.0.0

BS

Animation

You can apply animation such as spin or pulse on avatar icon. Because actually BsAvatar uses BsIcon internally.

Spin ON

Pulse ON

Usage Example

The following is an example that demonstrate more advanced use of the <bs-avatar>.

Inside Other Component

<bs-avatar> can also be used inside other component. Example below, shows you how to use <bs-avatar> inside BsListTile component.

Avatar using external image

22

---

Avatar using Material Icon

8

---

BS

This avatar created using ShortText

5

API Reference

Property	Type	Default	Description
border	String		Apply border to the component. v2.0.3
border-color	String		The component border's color. Any MDBootstrap Color and Material Color variants can be used. v2.0.3
circle	Boolean	false	Create avatar with circle shape.
height	Number/String		The component's height in pixel. If using unit, valid units are: px, rem, em. v2.0.0
icon	String		The icon to display as avatar. Updated on v2.1.0 Use any valid android icon name from Google Material Symbols with or without a suffix. Valid suffixes are: _outlined, _rounded, _sharp, _filled, _outlined_filled, _rounded_filled, and _sharp_filled. Suffix will take precedence over icon-variant property.
icon-flip	String		Flip the icon, valid values are: horizontal, vertical, both.
icon-pulse	Boolean	false	Apply pulse animation to the icon.
icon-rotation	Number		Rotate the icon, valid values are: 90, 180, 270.
icon-spin	Boolean	false	Apply spin animation to the icon.
icon-variant	String	'outlined'	Use predefined icon style. Valid values are: outlined, rounded, sharp, filled, outlined_filled, rounded_filled, and sharp_filled. Updated on v2.1.0
img-src	String		Set the image location or image url to be displayed as avatar.
rounded	Boolean	false	Create avatar with rounded shape. If circle and rounded are not set, then avatar shape will become square.
size	Number/String	48	The component's size in pixel. If using unit, valid units are: px, rem, em.
text	String		The text to display inside the component. Use short text (1 to 3 characters), so the text can be displayed properly. The text will be transformed to uppercase.
width	Number/String		The component's width in pixel. If using unit, valid units are: px, rem, em. v2.0.0

Name	Description
default	The outlet slot used to place custom content. v2.0.0