Persona
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
Persona in various sizes
Size 24 Persona
Annie Lindqvist
Secondary
Size 32 Persona (Busy)
Annie Lindqvist
Secondary
Size 40 Persona (Away)
Annie Lindqvist
Software Engineer
Size 48 Persona (Blocked)
Annie Lindqvist
Software Engineer
Size 56 Persona (Online)
Annie Lindqvist
Software Engineer
Size 72 Persona (Busy)
Annie Lindqvist
Software Engineer
In a meeting
Size 100 Persona (Offline)
Annie Lindqvist
Software Engineer
Off
Available at 4:00pm
Size 120 Persona (Do Not Disturb)
Annie Lindqvist
Software Engineer
In a meeting
Available at 4:00pm
Persona with custom action
Custom action can be revealed by hovering on the bottom of the image
Annie Lindqvist
Software Engineer
In a meeting
Available at 4:00pm
Action Click Count: 0
Persona with image action
Hover over the image to reveal the action
Edit image
Annie Lindqvist
Software Engineer
In a meeting
Available at 4:00pm
Image Click Count: 0
Persona with Initials
Persoan with invalid ImageUrl
SK
Saleh Khafan
Persoan with no ImageUrl
SX
Saleh Xafan
Implementation
BitPersona parameters
Name |
Type |
Default value |
Description |
|---|---|---|---|
| AllowPhoneInitials | bool | false | Whether initials are calculated for phone numbers and number sequences. |
| CoinSize | int | -1 | Optional custom persona coin size in pixel. |
| HidePersonaDetails | bool | false | Whether to not render persona details, and just render the persona image/initials. |
| IsOutOfOffice | bool | false | This flag can be used to signal the persona is out of office. This will change the way the presence icon looks for statuses that support dual-presence. |
| ImageUrl | string? | null | Url to the image to use, should be a square aspect ratio and big enough to fit in the image area. |
| 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. |
| InitialsColor | BitPersonaInitialsColor? | null | The background color when the user's initials are displayed. |
| OptionalText | string? | null | Optional text to display, usually a custom message set. The optional text will only be shown when using size100. |
| Presence | BitPersonaPresenceStatus | BitPersonaPresenceStatus.None | Presence of the person to display - will not display presence if undefined. |
| PresenceTitle | string? | null | Presence title to be shown as a tooltip on hover over the presence icon. |
| SecondaryText | string? | null | Secondary text to display, usually the role of the user. |
| ShowInitialsUntilImageLoads | bool | false | If true renders the initials while the image is loading. This only applies when an imageUrl is provided. |
| ShowUnknownPersonaCoin | bool | false | If true, show the special coin for unknown persona. It has '?' in place of initials, with static font and background colors. |
| Size | string? | null | Decides the size of the control. |
| Text | string? | null | Primary text to display, usually the name of the person. |
| 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. |
| ActionIconName | string | Edit | Icon name for the icon button of the custom action. |
| OnActionClick | EventCallback<MouseEventArgs> | null | Callback for the persona custom action. |
| ActionFragment | RenderFragment? | null | Optional Custom template for the custom action element. |
| OnImageClick | EventCallback<MouseEventArgs> | null | Callback for when the image clicked. |
| ImageOverlayFragment | RenderFragment? | null | Optional Custom template for the image overlay. |
BitComponentBase parameters
Name |
Type |
Default value |
Description |
|---|---|---|---|
| AriaLabel | string? | null | The aria-label of the control for the benefit of screen readers. |
| Class | string? | null | Custom CSS class for the root element of the component. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Capture and render additional attributes in addition to the component's parameters. |
| Id | string? | null | Custom id attribute for the root element. if null the UniqueId will be used instead. |
| IsEnabled | bool | true | Whether or not the component is enabled. |
| Style | string? | null | Custom CSS style for the root element of the component. |
| Visibility | BitVisibility | BitVisibility.Visible | Whether the component is visible, hidden or collapsed. |
BitComponentBase public members
Name |
Type |
Default value |
Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction. |
| RootElement | ElementReference | The ElementReference of the root element. |
BitPersonaPresenceStatus enum
Name |
Value |
Description |
|---|---|---|
| Away | 3 | |
| Blocked | 5 | |
| Busy | 6 | |
| Dnd | 4 | |
| None | 0 | |
| Offline | 1 | |
| Online | 2 |
BitPersonaInitialsColor enum
Name |
Value |
Description |
|---|---|---|
| Black | Black=11 | |
| Blue | Blue=1 | |
| Burgundy | Burgundy=19 | |
| CoolGray | CoolGray=21 | |
| Cyan | Cyan=23 | |
| DarkBlue | DarkBlue=2 | |
| DarkGreen | DarkGreen=6 | |
| DarkRed | DarkRed=14 | |
| Gold | Gold=18 | |
| Gray | Gray=22 | gray is a color that can result in offensive Bitpersona coins with some initials combinations, so it can only be set with overrides. |
| Green | Green=5 | |
| LightBlue | LightBlue=0 | |
| LightGreen | LightGreen=4 | |
| LightPink | LightPink=7 | |
| LightRed | LightRed=17 | |
| Magenta | Magenta=9 | |
| Orange | Orange=12 | |
| Pink | Pink=8 | |
| Purple | Purple=10 | |
| Red | Red=13 | |
| Rust | Rust=24 | |
| Teal | Teal=3 | |
| Transparent | Transparent=15 | Transparent is not intended to be used with typical initials due to accessibility issues. Its primary use is for overflow buttons, so it is considered a reserved color and can only be set with overrides. |
| Violet | Violet=16 | |
| WarmGray | WarmGray=20 |
BitPersonaSize enum
Name |
Value |
Description |
|---|---|---|
| Size20 | 20px | Renders a 20px BitPersonaCoin. |
| Size24 | 24px | Renders a 24px BitPersonaCoin. |
| Size32 | 32px | Renders a 32px BitPersonaCoin. |
| Size40 | 40px | Renders a 40px BitPersonaCoin. |
| Size48 | 48px | Renders a 48px BitPersonaCoin. |
| Size56 | 56px | Renders a 56px BitPersonaCoin. |
| Size72 | 72px | Renders a 72px BitPersonaCoin. |
| Size100 | 100px | Renders a 100px BitPersonaCoin. |
| Size120 | 120px | Renders a 120px BitPersonaCoin. |
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). |