Warning: We no longer develop features for this version of SKY UX, and we recommend that you use the latest version instead. This site describes the AngularJS (1.x) implementation of the SKY UX framework. We still support this version, but it is in maintenance mode. For more information, see developer.blackbaud.com/skyux.


The avatar component displays an image to identify a record.

The component also includes an option to let users change the image. To select a different image, users can click the image or drag another image on top of it. In addition, when images are missing, the avatar component can display the initials of a name that you provide.

Avatar settings

  • bb-avatar — Displays an image to identify a record.
    • bb-avatar-src — Provides a reference to a URL or File object that represents the avatar.
    • bb-avatar-name — Specifies the name of the record that the avatar represents. If bb-avatar-src does not specify an image, the component extracts initials from the first and last words of this name and displays them in place of the missing image. To ensure that the component extracts the correct initials, specify a name with no prefix (e.g. "Dr.", "Mrs.") or suffix (e.g. "Jr.", "Esq."). You can also provide the initials with a space between them (e.g. "R H").
    • bb-avatar-change — Specifying a function for this attribute will allow the user to select a new photo, much like the bb-file-drop component. When a user changes an image, the component calls this function with the File object that represents the new image. This file can then be uploaded and the bb-avatar-src property updated to show the new image either with the provided File or the URL of the uploaded image.

bbAvatarConfig settings

  • maxFileSize — The maximum allowed size of a file to be uploaded in bytes. (Default: 500000)


To change the image, click it or drag another image on top of it.


<div ng-controller="AvatarTestController as avatarCtrl">
  <div style="display: inline-block;">
    To change the image, click it or drag another image on top of it.


/* global angular*/

(function () {
    'use strict';

    function AvatarTestController() {
        var vm = this;

        vm.name = 'Robert C. Hernandez';

        vm.avatarChange = function (file) {
            // This is where you might upload the new avatar, but for this
            // demo we'll just update it locally.
            if (file) {
                vm.avatarSrc = file;

        .controller('AvatarTestController', AvatarTestController);