# 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
```
```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
```
\n**Action**:
```razor
Upload
```
```csharp
private int imageClickCount = 0;
private int actionClickCount = 0;
```
\n**Disabled**:
```razor
```
\n**Image events**:
```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
```
\n**Color**:
```razor
```
\n**External Icons**:
```razor
```
```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
```
With a glyph inside the dot (PresenceIconNames)
A single status, without a map of all eight (PresenceIconName)
Named for the reader (PresenceTitles)
On a surface of its own, with the gap cut in that surface instead of the page
The speaker and everyone else
Action Click Count: @actionClickCount
Image Click Count: @imageClickCount
Image Load Count: @imageLoadCount
Image Error Count: @imageErrorCount
``` ```csharp private int imageLoadCount = 0; private int imageErrorCount = 0; ``` \n**Image loading**: ```razor
Image Click Count: @imageClickCount
Action Click Count: @actionClickCount