Skip to content
# Persona **Also known as:** Avatar ## Description The Persona shows who someone is. Its coin holds their picture, or the initials derived from their name, or an icon when there is neither, in nine sizes from a bare presence dot up to 120px and in any custom size beside them. Up to four lines of detail sit next to the coin, each of them a text or a template of your own, and the size decides how many of them there is room for. A presence dot marks availability across eight statuses, carrying a glyph and a name of your choosing; the coin can be a circle, a rounded square or a sharp one, filled, outlined or bare, colored from the palette or from a stable hash of the person's identity, ringed while they are the one a view is about and pushed back while they are not, and turned into a button that reveals an overlay for changing the picture or into a link that opens their profile. ## Parameters | Name | Type | Default Value | Description | | :--- | :--- | :------------ | :---------- | | ActionButtonTitle | `string` | Edit image | The title of the action button (tooltip). | | ActionIcon | `BitIconInfo?` | null | Icon for the icon button of the custom action using BitIconInfo. Takes precedence over ActionIconName when both are set. | | ActionIconName | `string?` | | Icon name for the icon button of the custom action. | | ActionTemplate | `RenderFragment?` | | Optional Custom template for the custom action element. | | Active | `bool` | false | Marks the persona as active, which decorates its coin according to ActiveAppearance. | | ActiveAppearance | `BitPersonaActiveAppearance?` | null | How the coin is decorated while Active is true. The default is a ring. | | AllowPhoneInitials | `bool` | false | Whether initials are derived from names that carry no letters at all - a phone number, an order id, a project named after a number sequence. Such a name otherwise falls back to the coin icon. | | AutoCoinColor | `bool` | false | If true, automatically generates a stable coin background color derived from CoinColorSeed, ImageInitials or PrimaryText. Only takes effect when CoinColor is not explicitly set. | | AutoCoinColors | `IEnumerable<BitColor>?` | null | The colors AutoCoinColor is allowed to pick from, in place of the built-in set. An empty or null value falls back to the built-in set. | | Classes | `BitPersonaClassStyles` | null | Custom CSS classes for different parts of the BitPersona component. | | CoinColor | `BitColor?` | null | The background color when the user's initials are displayed. | | CoinColorSeed | `string?` | null | The text AutoCoinColor hashes to pick a coin color, so the color follows the identity of the person rather than the name being displayed. Falls back to ImageInitials and then PrimaryText. | | CoinIcon | `BitIconInfo?` | null | The icon rendered inside the coin in place of the initials. Takes precedence over CoinIconName when both are set. | | CoinIconName | `string?` | null | The name of the icon rendered inside the coin in place of the initials. | | CoinSize | `int?` | | Optional custom persona coin size in pixel. | | CoinTemplate | `RenderFragment?` | | Custom persona coin's image template. | | CoinVariant | `BitVariant?` | null | The variant of the coin. | | FullWidth | `bool` | false | Renders the persona in full width of its container element. | | HidePersonaDetails | `bool` | false | Whether to not render persona details, and just render the persona image/initials. | | Href | `string?` | null | The url the coin navigates to, which renders it as a link (an anchor element) instead of a plain box. | | ImageAlt | `string?` | null | Alt text for the image to use. default is empty string. | | ImageAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered img element of the coin (crossorigin, referrerpolicy, decoding, fetchpriority, draggable, ...). | | ImageFadeIn | `bool` | false | Fades the picture in once it has loaded, instead of letting it appear the instant the last byte arrives. | | ImageInitials | `string?` | null | The user's initials to display in the image area when there is no image. When it is not set, the initials are derived from PrimaryText. | | ImageLoading | `BitImageLoading?` | null | Specifies the loading behavior of the image. Maps to the HTML loading attribute (e.g., "lazy" or "eager"). | | ImageOverlayTemplate | `RenderFragment?` | | Optional Custom template for the image overlay. | | ImageOverlayText | `string` | Edit image | The text of the image overlay. | | ImageSizes | `string?` | null | The set of media conditions that tells the browser which of the ImageSrcSet candidates to pick. Maps to the HTML img sizes attribute. | | ImageSrcSet | `string?` | null | A set of image source URLs for different display densities or sizes. Maps to the HTML img srcset attribute. A coin given nothing but this still shows a picture: ImageUrl is only the source the browser falls back to. | | ImageUrl | `string?` | null | Url to the image to use, should be a square aspect ratio and big enough to fit in the image area. | | Inactive | `bool` | false | Marks the persona as one of the people a view is not about, which shrinks its coin slightly and fades it back. Ignored while Active is true. | | OnActionClick | `EventCallback<MouseEventArgs>` | null | Callback for the persona custom action. | | OnImageClick | `EventCallback<MouseEventArgs>` | null | Callback for when the image clicked. Assigning it renders the coin as a real button element, so it is announced as one, takes the focus, answers Enter and Space, and goes inert with the rest of the persona when it is disabled. | | OnImageError | `EventCallback<ErrorEventArgs>` | null | Callback for when the image fails to load. | | OnImageLoad | `EventCallback<ProgressEventArgs>` | null | Callback for when the image successfully loads. | | OptionalText | `string?` | null | Optional text to display, usually a custom message set. The optional text will only be shown when using size100 or size120. | | OptionalTextTemplate | `RenderFragment?` | | Custom optional text template. | | Presence | `BitPersonaPresence` | BitPersonaPresence.None | Presence of the person to display - will not display presence if undefined. | | PresenceIcon | `BitIconInfo?` | null | The icon rendered inside the presence dot of the current Presence, for a persona that shows a single status and needs no map of all of them. A matching entry of PresenceIcons or PresenceIconNames takes precedence over it. | | PresenceIconName | `string?` | null | The name of the icon rendered inside the presence dot of the current Presence. Ignored when PresenceIcon is set. | | PresenceIcons | `Dictionary<BitPersonaPresence, BitIconInfo>?` | null | The icons to be used for the presence status with BitIconInfo. Takes precedence over PresenceIconNames when both are set. | | PresenceIconNames | `Dictionary<BitPersonaPresence, string>?` | null | The icon names to be used for the presence status. | | PresenceTitle | `string?` | null | Presence title to be shown as a tooltip on hover over the presence icon. | | PresenceTitles | `Dictionary<BitPersonaPresence, string>?` | null | The titles to be shown as a tooltip on hover over the presence dot, one per status. The matching entry also becomes the accessible name of the dot and takes precedence over PresenceTitle. | | PrimaryText | `string?` | null | Primary text to display, usually the name of the person. | | PrimaryTextTemplate | `RenderFragment?` | | Custom primary text template. | | SecondaryText | `string?` | null | Secondary text to display, usually the role of the user. | | SecondaryTextTemplate | `RenderFragment?` | | Custom secondary text template. | | Shape | `BitPersonaShape?` | null | The outline of the coin: a circle, a rounded square or a sharp one. Supersedes Squared, and wins over it when both are set. | | ShowInitialsUntilImageLoads | `bool` | false | If true renders the initials while the image is loading. This only applies when an imageUrl is provided. The initials sit behind the picture and are covered the moment it arrives. | | ShowOverflowTooltip | `bool` | true | Whether each of the four detail texts carries itself as a native tooltip, for reading the part of it that the row had to clip. | | ShowSecondaryText | `bool` | false | Shows the secondary text at every size, including the small ones that normally leave no room for it. | | Unknown | `bool` | false | If true, show the special coin for unknown persona. It shows an icon in place of the initials, and takes precedence over the image and the initials. | | UnknownIcon | `BitIconInfo?` | null | Icon for the unknown persona coin using BitIconInfo. Takes precedence over UnknownIconName when both are set. | | UnknownIconName | `string?` | null | Icon name for the unknown persona coin. | | Rel | `BitLinkRels?` | null | Sets the rel attribute of the coin when Href renders it as a link. When it is not set and Target is _blank, rel="noopener" is added automatically. | | Reversed | `bool` | false | Reverses the texts and image location. | | Size | `BitPersonaSize` | BitPersonaSize.Size48 | Decides the size of the control. | | Squared | `bool` | false | If true, renders the coin with a rounded square shape instead of the default circular shape. This is the shorthand for Shape=Rounded; a Shape of its own takes precedence over it. | | Styles | `BitPersonaClassStyles` | null | Custom CSS styles for different parts of the BitPersona component. | | Target | `string?` | null | Sets the target attribute of the coin when Href renders it as a link. | | TertiaryText | `string?` | null | Tertiary text to display, usually the status of the user. The tertiary text will only be shown when using size72, size100 or size120. | | TertiaryTextTemplate | `RenderFragment?` | null | Custom tertiary text template. | | AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. | | Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. | | Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. | | ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. | | HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. | | Id | `string?` | null | Gets or sets the unique identifier for the component's root element. | | IsEnabled | `bool` | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. | | Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. | | TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. | | Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. | ## Public Members | Name | Type | Default Value | Description | | :--- | :--- | :------------ | :---------- | | UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. | | RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. | ## Enums ### BitPersonaPresence Enum | Name | Value | Description | | :--- | :--- | :---------- | | None | 0 | No presence is known or worth showing, so no dot is rendered at all. | | Offline | 1 | The person is signed out. | | Online | 2 | The person is signed in and available. | | Away | 3 | The person is signed in but idle. | | Dnd | 4 | The person has asked not to be interrupted. | | Blocked | 5 | The person cannot be reached from here. | | Busy | 6 | The person is signed in and occupied. | | OutOfOffice | 7 | The person is away from work for an extended period. | | Unknown | 8 | The presence of the person could not be determined. | ### BitPersonaSize Enum | Name | Value | Description | | :--- | :--- | :---------- | | Size8 | 0 | A presence dot and the primary text only, with no coin at all. | | Size24 | 1 | A 24px coin with the primary text. | | Size32 | 2 | A 32px coin with the primary text. | | Size40 | 3 | A 40px coin with the primary and secondary texts. | | Size48 | 4 | A 48px coin with the primary and secondary texts. | | Size56 | 5 | A 56px coin with the primary and secondary texts. | | Size72 | 6 | A 72px coin with the primary, secondary and tertiary texts. | | Size100 | 7 | A 100px coin with all four texts. | | Size120 | 8 | A 120px coin with all four texts. | ### BitColor Enum | Name | Value | Description | | :--- | :--- | :---------- | | Primary | 0 | Primary general color. | | Secondary | 1 | Secondary general color. | | Tertiary | 2 | Tertiary general color. | | Info | 3 | Info general color. | | Success | 4 | Success general color. | | Warning | 5 | Warning general color. | | SevereWarning | 6 | SevereWarning general color. | | Error | 7 | Error general color. | | PrimaryBackground | 8 | Primary background color. | | SecondaryBackground | 9 | Secondary background color. | | TertiaryBackground | 10 | Tertiary background color. | | PrimaryForeground | 11 | Primary foreground color. | | SecondaryForeground | 12 | Secondary foreground color. | | TertiaryForeground | 13 | Tertiary foreground color. | | PrimaryBorder | 14 | Primary border color. | | SecondaryBorder | 15 | Secondary border color. | | TertiaryBorder | 16 | Tertiary border color. | ### BitPersonaShape Enum | Name | Value | Description | | :--- | :--- | :---------- | | Circular | 0 | A circle, which is the shape a picture of a person is shown in. | | Rounded | 1 | A square with the rounded corners of a control, which is the shape most design systems reserve for entities - teams, rooms, service accounts - rather than people. | | Square | 2 | A square with sharp corners, for a tile or a logo that has to fill the coin edge to edge. | ### BitPersonaActiveAppearance Enum | Name | Value | Description | | :--- | :--- | :---------- | | Ring | 0 | Draws a ring around the coin in the coin color, separated from it by a gap in the page background color. | | Shadow | 1 | Lifts the coin with an elevation shadow. | | RingShadow | 2 | Combines the ring and the elevation shadow. | ### BitVariant Enum | Name | Value | Description | | :--- | :--- | :---------- | | Fill | 0 | Fill styled variant. | | Outline | 1 | Outline styled variant. | | Text | 2 | Text styled variant. | ### BitImageLoading Enum | Name | Value | Description | | :--- | :--- | :---------- | | Eager | 0 | The default behavior, eager tells the browser to load the image as soon as the img element is processed. | | Lazy | 1 | Tells the user agent to hold off on loading the image until the browser estimates that it will be needed imminently. | ### BitVisibility Enum | Name | Value | Description | | :--- | :--- | :---------- | | Visible | 0 | The content of the component is visible. | | Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). | | Collapsed | 2 | The component is hidden (display:none). | ### BitDir Enum | Name | Value | Description | | :--- | :--- | :---------- | | Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). | | Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). | | Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. | ## Sub Classes ### BitPersonaClassStyles Properties | Name | Type | Default Value | Description | | :--- | :--- | :------------ | :---------- | | Root | `string?` | null | Custom CSS classes/styles for the root element of the BitPersona. | | CoinContainer | `string?` | null | Custom CSS classes/styles for the coin container of the BitPersona. | | PresentationIcon | `string?` | null | Custom CSS classes/styles for the presentation icon of the BitPersona. | | Presentation | `string?` | null | Custom CSS classes/styles for the presence dot of the BitPersona at Size8. Kept for backward compatibility - Presence is applied to the dot at every size and is what new code should use. | | ImageContainer | `string?` | null | Custom CSS classes/styles for the image container of the BitPersona. | | UnknownIcon | `string?` | null | Custom CSS classes/styles for the unknown icon of the BitPersona. | | CoinIcon | `string?` | null | Custom CSS classes/styles for the coin icon of the BitPersona, which is the icon shown inside the coin in place of the initials. | | ImageOverlay | `string?` | null | Custom CSS classes/styles for the image overlay of the BitPersona. | | ImageOverlayText | `string?` | null | Custom CSS classes/styles for the image overlay text of the BitPersona. | | Initials | `string?` | null | Custom CSS classes/styles for the initials of the BitPersona. | | Image | `string?` | null | Custom CSS classes/styles for the image of the BitPersona. | | ActionButton | `string?` | null | Custom CSS classes/styles for the action button of the BitPersona. | | ActionButtonIcon | `string?` | null | Custom CSS classes/styles for the action button icon of the BitPersona. | | Presence | `string?` | null | Custom CSS classes/styles for the presence dot of the BitPersona. | | DetailsContainer | `string?` | null | Custom CSS classes/styles for the details container of the BitPersona. | | PrimaryTextContainer | `string?` | null | Custom CSS classes/styles for the primary text container of the BitPersona. | | SecondaryTextContainer | `string?` | null | Custom CSS classes/styles for the secondary text container of the BitPersona. | | TertiaryTextContainer | `string?` | null | Custom CSS classes/styles for the tertiary text container of the BitPersona. | | OptionalTextContainer | `string?` | null | Custom CSS classes/styles for the optional text container of the BitPersona. | ### BitIconInfo Properties | Name | Type | Default Value | Description | | :--- | :--- | :------------ | :---------- | | Name | `string?` | null | Gets or sets the name of the icon. For external icons, this can be the full CSS class name if "BaseClass" and "Prefix" are empty. | | BaseClass | `string?` | null | Gets or sets the base CSS class for the icon. For external icon libraries like FontAwesome, you might set this to "fa" or leave empty. | | Prefix | `string?` | null | Gets or sets the CSS class prefix used before the icon name. For external icon libraries, you might set this to "fa-" or leave empty. | ## Examples \n**Basic**: ```razor ``` \n**Presence**: ```razor
With a glyph inside the dot (PresenceIconNames)
A single status, without a map of all eight (PresenceIconName)
Named for the reader (PresenceTitles)
``` ```csharp private readonly Dictionary _iconNames = new() { { BitPersonaPresence.Offline, BitIconName.UnavailableOffline }, { BitPersonaPresence.Online, BitIconName.SkypeCheck }, { BitPersonaPresence.Away, BitIconName.SkypeClock }, { BitPersonaPresence.Dnd, BitIconName.SkypeMinus }, { BitPersonaPresence.Blocked, BitIconName.BlockedSolid }, { BitPersonaPresence.Busy, BitIconName.Blocked2Solid }, { BitPersonaPresence.OutOfOffice, BitIconName.Airplane }, { BitPersonaPresence.Unknown, BitIconName.StatusCircleQuestionMark }, }; private readonly Dictionary _presenceTitles = new() { { BitPersonaPresence.Offline, "Signed out" }, { BitPersonaPresence.Online, "Available" }, { BitPersonaPresence.Away, "Be right back" }, { BitPersonaPresence.Dnd, "Do not disturb" }, { BitPersonaPresence.Blocked, "Blocked" }, { BitPersonaPresence.Busy, "In a call" }, { BitPersonaPresence.OutOfOffice, "Out of office" }, { BitPersonaPresence.Unknown, "Presence unknown" }, }; ``` \n**Initials**: ```razor ``` \n**Coin icon**: ```razor ``` \n**Unknown**: ```razor ``` \n**Shape**: ```razor ``` \n**Variant**: ```razor ``` \n**Active**: ```razor
On a surface of its own, with the gap cut in that surface instead of the page
The speaker and everyone else
``` \n**Action**: ```razor

Action Click Count: @actionClickCount

Image Click Count: @imageClickCount

Upload ``` ```csharp private int imageClickCount = 0; private int actionClickCount = 0; ``` \n**Disabled**: ```razor ``` \n**Image events**: ```razor

Image Load Count: @imageLoadCount

Image Error Count: @imageErrorCount

``` ```csharp private int imageLoadCount = 0; private int imageErrorCount = 0; ``` \n**Image loading**: ```razor @(isFadeInPersonaShown ? "Hide" : "Show") @if (isFadeInPersonaShown) { } ``` ```csharp private bool isFadeInPersonaShown = true; ``` \n**Responsive image**: ```razor ``` \n**Templates**: ```razor Xafan Salina Software Engineer In a meeting Available at 7:00pm Edit image ``` \n**AutoCoinColor**: ```razor ``` ```csharp private readonly BitColor[] _coinColors = [BitColor.Primary, BitColor.Info, BitColor.Tertiary]; ``` \n**Reversed**: ```razor ``` \n**FullWidth**: ```razor
``` \n**Link**: ```razor

Image Click Count: @imageClickCount

``` \n**Color**: ```razor ``` \n**External Icons**: ```razor

Action Click Count: @actionClickCount

``` ```csharp private readonly Dictionary _icons = new() { { BitPersonaPresence.Offline, BitIconInfo.Bi("wifi-off") }, { BitPersonaPresence.Online, BitIconInfo.Bi("check-circle-fill") }, { BitPersonaPresence.Away, BitIconInfo.Bi("clock-fill") }, { BitPersonaPresence.Dnd, BitIconInfo.Bi("dash-circle-fill") }, { BitPersonaPresence.Blocked, BitIconInfo.Bi("ban") }, { BitPersonaPresence.Busy, BitIconInfo.Bi("exclamation-circle-fill") }, }; ``` \n**Size**: ```razor ``` ```csharp private bool isDetailsShown = true; ``` \n**Style & Class**: ```razor ``` \n**RTL**: ```razor
```