Persona
Avatar
A BitPersona is a visual representation of a person across products, typically showcasing the image that person has chosen to upload themselves. The control can also be used to show that person's online status. The complete control includes an individual's avatar (an uploaded image or a composition of the person’s initials on a background color), their name or identification, and online status. The BitPersona control is used in the PeoplePicker and Facepile controls.
Usage
Basic
SK
Saleh Khafan
Xafan Salina
Unknown
Developer
Variant
SX
Saleh Xafan
Developer
SX
Saleh Xafan
Developer
SX
Saleh Xafan
Developer
Squared
Saleh Xafan
Circle
Saleh Xafan
Square
Presence
None:
Xafan Salina
Software Engineer
Offline:
Xafan Salina
Software Engineer
Online:
Xafan Salina
Software Engineer
Away:
Xafan Salina
Software Engineer
Do not Disturb (Dnd):
Xafan Salina
Software Engineer
Blocked:
Xafan Salina
Software Engineer
Busy:
Xafan Salina
Software Engineer
Size
Size 8 Persona:
Xafan Salina
Secondary
Size 24 Persona:
Xafan Salina
Secondary
Size 32 Persona:
Xafan Salina
Secondary
Size 40 Persona:
Xafan Salina
Software Engineer
Size 48 Persona:
Xafan Salina
Software Engineer
Size 56 Persona:
Xafan Salina
Software Engineer
Size 72 Persona:
Xafan Salina
Software Engineer
In a meeting
Size 100 Persona:
Xafan Salina
Software Engineer
Off
Available at 4:00pm
Size 120 Persona:
Xafan Salina
Software Engineer
In a meeting
Available at 4:00pm
CoinSize 150:
Xafan Salina
Software Engineer
In a meeting
Available at 4:00pm
Reversed
Adjust the texts position of BitPersona's image to be reversed.
Xafan Salina
Software Engineer
Action
Custom action can be revealed by hovering on the bottom of the image:
Xafan Salina
Software Engineer
In a meeting
Available at 4:00pm
Action Click Count: 0
Hover over the image to reveal the image click action:
Edit image
Xafan Salina
Software Engineer
In a meeting
Available at 4:00pm
Image Click Count: 0
Initials
Invalid ImageUrl:
SK
Saleh Khafan
No ImageUrl:
SX
Saleh Xafan
ImageInitials:
S
Saleh Khafan
Templates
Text templates:
Edit image
Xafan Salina
Software Engineer
In a meeting
Available at 7:00pm
Coin template:
Xafan Salina
Software Engineer
Color
P
Primary
S
Secondary
T
Tertiary
I
Info
(default)
S
Success
W
Warning
S
SevereWarning
E
Error
P
PrimaryBackground
S
SecondaryBackground
T
TertiaryBackground
P
PrimaryForeground
S
SecondaryForeground
T
TertiaryForeground
P
PrimaryBorder
S
SecondaryBorder
T
TertiaryBorder
External Icons
Use icons from external libraries like FontAwesome and Bootstrap Icons with the
ActionIcon and PresenceIcons parameters.
FontAwesome action icon (hover over the image):
Xafan Salina
Software Engineer
In a meeting
Available at 4:00pm
Action Click Count: 0
Bootstrap Icons presence icons:
Xafan Salina
Software Engineer
Xafan Salina
Software Engineer
Xafan Salina
Software Engineer
Xafan Salina
Software Engineer
Xafan Salina
Software Engineer
AutoCoinColor
Different people each get a distinct, consistent coin color automatically:
XS
Xafan Salina
Software Engineer
SK
Saleh Khafan
Developer
TR
Ted Randall
Designer
CS
Carlos Slattery
Manager
EA
Elvia Atkins
QA Engineer
Custom ImageInitials also influence the generated color:
ZZ
Xafan Salina
Software Engineer
CoinColor takes precedence over AutoCoinColor when set explicitly:
XS
Xafan Salina
Always green
Image Events
OnImageLoad - callback invoked when the image loads successfully:
Xafan Salina
Software Engineer
Image Load Count: 0
OnImageError - callback invoked when the image fails to load:
Xafan Salina
Software Engineer
Image Error Count: 0
ImageLoading
ImageLoading controls when the browser fetches the image (maps to the HTML loading attribute):
Xafan Salina
Lazy loaded
Xafan Salina
Eagerly loaded
ImageSrcSet
ImageSrcSet provides alternate image sources for different screen densities (maps to the HTML srcset attribute):
Xafan Salina
Software Engineer
Style & Class
Component's Style & Class:
SK
Saleh Khafan
SK
Saleh Khafan
Styles & Classes:
SK
Saleh Khafan
SK
Saleh Khafan
RTL
نص
صالح یوسف نژاد
مهندس نرم افزار
API
BitPersona 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. | |
| AutoCoinColor | bool | false | If true, automatically generates a stable coin background color derived from the person's name or initials. Only takes effect when CoinColor is not explicitly 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. |
| Squared | bool | false | If true, renders the coin with a square shape instead of the default circular shape. |
| 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. |
| HidePersonaDetails | bool | false | Whether to not render persona details, and just render the persona image/initials. |
| ImageAlt | string? | null | Alt text for the image to use. default is empty string. |
| ImageInitials | string? | null | The user's initials to display in the image area when there is no image. |
| 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. |
| ImageSrcSet | string? | null | A set of image source URLs for different display densities or sizes. Maps to the HTML img srcset attribute. |
| ImageUrl | string? | null | Url to the image to use, should be a square aspect ratio and big enough to fit in the image area. |
| OnActionClick | EventCallback<MouseEventArgs> | null | Callback for the persona custom action. |
| OnImageClick | EventCallback<MouseEventArgs> | null | Callback for when the image clicked. |
| 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. |
| OptionalTextTemplate | RenderFragment? | Custom optional text template. | |
| Presence | BitPersonaPresence | BitPersonaPresence.None | Presence of the person to display - will not display presence if undefined. |
| 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. |
| 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. | |
| ShowInitialsUntilImageLoads | bool | false | If true renders the initials while the image is loading. This only applies when an imageUrl is provided. |
| Unknown | bool | false | If true, show the special coin for unknown persona. It has '?' in place of initials, with static font and background colors. |
| 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. |
| Reversed | bool | false | Reverses the texts and image location. |
| Size | string? | null | Decides the size of the control. |
| Styles | BitPersonaClassStyles | null | Custom CSS styles for different parts of the BitPersona component. |
| TertiaryText | string? | null | Tertiary text to display, usually the status of the user. The tertiary text will only be shown when using size72 or size100. |
| TertiaryTextTemplate | RenderFragment? | null | Custom tertiary text template. |
BitComponentBase parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| 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. |
| 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. |
BitComponentBase 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. |
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 presentation of the BitPersona. |
| 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. |
| 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 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. |
BitPersonaPresence enum
| Name | Value | Description |
|---|---|---|
| Away | 3 | |
| Blocked | 5 | |
| Busy | 6 | |
| Dnd | 4 | |
| None | 0 | |
| Offline | 1 | |
| Online | 2 |
BitPersonaSize enum
| Name | Value | Description |
|---|---|---|
| Size8 | Renders a 8px BitPersonaCoin. | |
| Size24 | Renders a 24px BitPersonaCoin. | |
| Size32 | Renders a 32px BitPersonaCoin. | |
| Size40 | Renders a 40px BitPersonaCoin. | |
| Size48 | Renders a 48px BitPersonaCoin. | |
| Size56 | Renders a 56px BitPersonaCoin. | |
| Size72 | Renders a 72px BitPersonaCoin. | |
| Size100 | Renders a 100px BitPersonaCoin. | |
| Size120 | Renders a 120px BitPersonaCoin. |
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. |
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. |
Feedback
You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.
Or you can review / edit this page on GitHub.
- On this page