Avatar

TsgcHTMLComponent_Avatar — render a user avatar from an image or initials with size, shape and a presence-status dot, in Delphi, C++ Builder and .NET.

TsgcHTMLComponent_Avatar

A user avatar that shows either an image or initials. Set the size, shape and presence status, then read the HTML property.

Component class

TsgcHTMLComponent_Avatar

Renders

Bootstrap 5 markup

Languages

Delphi, C++ Builder, .NET

Create it, set the identity, render it

Assign Initials (or an ImageURL), pick a Size, Shape and Status, then read HTML — or use the static one-line Build helper.

uses
  sgcHTML_Enums, sgcHTML_Component_Avatar;

var
  oAv: TsgcHTMLComponent_Avatar;
begin
  oAv := TsgcHTMLComponent_Avatar.Create(nil);
  try
    oAv.Initials := 'JS';
    oAv.AltText := 'Jane Smith';
    oAv.Size := asLarge;
    oAv.Shape := apCircle;
    oAv.ColorStyle := hcPrimary;
    oAv.Status := atOnline;

    WebModule.Response := oAv.HTML;   // avatar markup
  finally
    oAv.Free;
  end;
end;

// Or in a single line with the static helpers:
Result := TsgcHTMLComponent_Avatar.Build('JS', asLarge, '#0d6efd', atOnline);
Result := TsgcHTMLComponent_Avatar.BuildImage('/img/jane.jpg', asLarge, atOnline);
// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Avatar.hpp

TsgcHTMLComponent_Avatar *oAv = new TsgcHTMLComponent_Avatar(NULL);
try
{
  oAv->Initials = "JS";
  oAv->AltText = "Jane Smith";
  oAv->Size = asLarge;
  oAv->Shape = apCircle;
  oAv->ColorStyle = hcPrimary;
  oAv->Status = atOnline;

  String html = oAv->HTML;   // avatar markup
}
__finally
{
  delete oAv;
}

// Or in a single line with the static helpers:
String html = TsgcHTMLComponent_Avatar::Build("JS", asLarge, "#0d6efd", atOnline);
String img = TsgcHTMLComponent_Avatar::BuildImage("/img/jane.jpg", asLarge, atOnline);
using esegece.sgcWebSockets;

var avatar = new TsgcHTMLComponent_Avatar();
avatar.Initials = "JS";
avatar.AltText = "Jane Smith";
avatar.Size = TsgcHTMLAvatarSize.asLarge;
avatar.Shape = TsgcHTMLAvatarShape.apCircle;
avatar.ColorStyle = TsgcHTMLColor.hcPrimary;
avatar.Status = TsgcHTMLAvatarStatus.atOnline;

string html = avatar.HTML;   // avatar markup

// Or in a single line with the static helpers:
string oneLine = TsgcHTMLComponent_Avatar.Build("JS", TsgcHTMLAvatarSize.asLarge,
    "#0d6efd", TsgcHTMLAvatarStatus.atOnline);
string fromImage = TsgcHTMLComponent_Avatar.BuildImage("/img/jane.jpg",
    TsgcHTMLAvatarSize.asLarge, TsgcHTMLAvatarStatus.atOnline);

Key properties & methods

The members you reach for most often.

Identity

ImageURL shows a photo; when empty, Initials renders a colored tile and AltText sets the image alt text.

Size

Size (TsgcHTMLAvatarSize: asSmall, asMedium, asLarge, asXLarge) scales the avatar.

Shape

Shape (TsgcHTMLAvatarShape: apCircle, apRounded, apSquare) styles the corners.

Status

Status (TsgcHTMLAvatarStatus: atOnline, atOffline, atBusy, atAway) draws a presence dot; StatusBorderWidth and StatusBorderColor ring it.

Color

ColorStyle (TsgcHTMLColor) themes the initials tile; Color overrides it with a raw hex value.

One-line build

Build(aInitials, aSize, aColor, aStatus) and BuildImage(aImageURL, aSize, aStatus) return the avatar HTML in a single static call.

Keep exploring

All sgcHTML ComponentsBrowse the full feature matrix of 60+ components.
Download Free TrialThe 30-day trial ships the 60.HTML demo projects.
PricingSingle, Team and Site licenses with full source code.

Ready to Get Started?

Download the free trial and start building web UIs in Delphi, C++ Builder and .NET.