Notifications
Persona
Bit.BlazorUIAvatar
The Persona shows who someone is: a coin holding their picture, their initials or an icon, up to four lines of detail beside it and a presence dot. Nine sizes from a bare dot to 120px (or any CoinSize), three shapes, three coin variants, palette or hashed coin colors, active and inactive states, a coin that is a button or a link, and a vertical layout for cards and tiles.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
PrimaryText is the name and SecondaryText the line under it. The coin shows the picture at
ImageUrl, else the initials of the name, else a person icon.
Xafan Salina
Software Engineer
Saleh Khafan
Developer
+1 (555) 016 7788
No initials to take
Presence
Presence puts a status dot on the coin, named after its status for screen readers.
ShowDefaultPresenceIcons adds a glyph per status, so they differ by more than color;
PresenceIconNames (or PresenceIconName) picks your own. Glyphs show on coins of 40px and up.
PresenceTitles (or PresenceTitle) renames the dot and adds a tooltip.
Xafan Salina
Online
Xafan Salina
Away
Xafan Salina
Busy
Xafan Salina
Dnd (do not disturb)
Xafan Salina
Offline
Xafan Salina
Blocked
Xafan Salina
OutOfOffice
Xafan Salina
Unknown
A glyph in the dot (PresenceIconNames), and a single status's glyph (PresenceIconName):
Xafan Salina
Software Engineer
Xafan Salina
Out of office
Named for the reader (PresenceTitles) - hover the dot:
Xafan Salina
Software Engineer
Initials
Two words give two initials, three skip the middle one; asides, punctuation and an address's domain are dropped.
A name with no letters gets the icon unless AllowPhoneInitials is set. ImageInitials overrides it all,
stepped down to fit when longer than two letters. ShowInitialsUntilImageLoads shows them while the picture loads, and after it fails.
Saleh Khafan
Two words
Ted Alan Randall
Three words - the middle one is skipped
Elvia Atkins (Contoso)
The aside is dropped
An address, not a name
+1 (555) 016 7788
AllowPhoneInitials
Saleh Khafan
ImageInitials
Saleh Khafan
Four letters, stepped down to fit
Saleh Khafan
Broken image url
Icon & Unknown
CoinIconName (or CoinIcon) puts an icon in place of the initials - a team, a room, a service account.
Unknown marks a person nobody could resolve, over any picture or initials; UnknownIconName (or UnknownIcon) replaces its question mark.
Design Team
12 members
Build Bot
Service account
Unknown
Developer
Unresolved
Custom unknown icon
Shape & Variant
Shape is Circular (default), Rounded or Square; the presence dot follows the corner out.
Squared is the older shorthand for Rounded. CoinVariant spends the coin color as a Fill (default),
an Outline or Text only.
Xafan Salina
Circular (default)
Xafan Salina
Rounded
Design Team
Square
Saleh Xafan
Fill (default)
Saleh Xafan
Outline
Saleh Xafan
Text
Active
Active points at the person a view is about - a Ring (default), a Shadow or both, by ActiveAppearance.
Inactive shrinks and fades everyone else back.
Xafan Salina
Ring (default)
Xafan Salina
Shadow
Xafan Salina
RingShadow
Saleh Khafan
Inactive
Action
OnActionClick adds a small button at the foot of the coin, revealed when the coin is hovered or the button focused (always shown on touch); ActionIconName and
ActionButtonTitle dress it and ActionTemplate replaces it. OnImageClick makes the coin itself a button
that reveals ImageOverlayText - an empty text leaves it unveiled.
Xafan Salina
Software Engineer
In a meeting
Available at 4:00pm
Action click count: 0
Xafan Salina
Software Engineer
In a meeting
Saleh Khafan
No picture, same overlay
Xafan Salina
Empty ImageOverlayText
Image click count: 0
Xafan Salina
ActionTemplate
Link
Href makes the coin a real link to the person's profile, named after them. Target _blank adds
noopener to the rel unless Rel already says NoOpener, NoReferrer or Opener, and ImageOverlayText puts a veil back on it.
Xafan Salina
Opens this page
Xafan Salina
With a veil
Disabled
Disabled dims the coin and texts; the action button is disabled, a clickable coin leaves the tab order and a link coin drops its href.
Xafan Salina
Software Engineer
Saleh Khafan
Clickable, disabled
Xafan Salina
Link, disabled
Image
OnImageLoad and OnImageError report the picture's fate - a failed one falls back to the initials.
ImageLoading, ImageFadeIn and ImageAttributes (any other img attribute) tune how it arrives.
ImageSrcSet and ImageSizes let the browser pick the sharpest copy, with or without ImageUrl.
ImageAlt describes the picture; unset, it is decorative, since the name already says who this is.
Xafan Salina
Loads, lazily
Image load count: 0
Xafan Salina
Fails
Image error count: 0
Xafan Salina
Eager, not draggable
Xafan Salina
Faded in
Responsive sources and a described picture:
Xafan Salina
ImageAlt
Xafan Salina
Candidates only
Templates
Each text row has a template (PrimaryTextTemplate, SecondaryTextTemplate, TertiaryTextTemplate,
OptionalTextTemplate); ImageOverlayTemplate replaces the overlay and CoinTemplate the coin's contents.
Xafan Salina
Software Engineer
In a meeting
Available at 7:00pm
Xafan Salina
CoinTemplate
AutoCoinColor
AutoCoinColor picks the coin color by a stable hash of CoinColorSeed (a user id keeps it from moving
with the display name), else of the initials or name. AutoCoinColors narrows the palette; an explicit CoinColor wins.
Xafan Salina
Software Engineer
Saleh Khafan
Developer
Ted Randall
Designer
Same seed, same color (CoinColorSeed):
Xafan Salina
u-1024
X. Salina
u-1024
A palette of your own (AutoCoinColors), and an explicit CoinColor:
Carlos Slattery
Manager
Elvia Atkins
QA Engineer
Xafan Salina
Always green
Layout
Reversed puts the coin after the texts. Vertical stacks the coin over them, centered, for cards and tiles.
FullWidth stretches the persona across its container so long texts ellipsize; each row keeps a tooltip of its
full text unless ShowOverflowTooltip is false.
Xafan Salina
Reversed
Xafan Salina
Vertical
Saleh Khafan
Vertical, Reversed
Xafan Salina Abdollahzadeh Yusefnejad
Principal Software Engineer, Developer Experience
Xafan Salina Abdollahzadeh Yusefnejad
No tooltip on hover
Cascading parameters
BitParams carries a BitPersonaParams to every persona under it - size, shape, coin coloring, layout,
presence glyphs and localized presence titles. It fills in only what a persona leaves unset, so the last one keeps its own Size.
Xafan Salina
Software Engineer
Saleh Khafan
Developer
Ted Randall
Its own Size
Color
CoinColor paints the coin from the general palette; the initials and icon take its paired text color.
Primary
Secondary
Tertiary
Info
(default)
Success
Warning
SevereWarning
Error
PrimaryBackground
SecondaryBackground
TertiaryBackground
PrimaryForeground
SecondaryForeground
TertiaryForeground
PrimaryBorder
SecondaryBorder
TertiaryBorder
External Icons
Every icon - action, coin, presence and unknown - takes a BitIconInfo beside its name, for FontAwesome, Bootstrap Icons or any other font.
Xafan Salina
FontAwesome action icon
Design Team
FontAwesome coin icon
Xafan Salina
Bootstrap Icons presence icons
Xafan Salina
Busy
Unresolved
FontAwesome unknown icon
Size
Size runs from Size8 (a dot and a name, no coin) to Size120, and decides which rows fit: secondary
from 40, tertiary from 72, optional from 100 - ShowSecondaryText forces the second. CoinSize sets any pixel size,
scaling the initials and dot with it. HidePersonaDetails leaves the coin alone, named after the person.
Xafan Salina
Secondary
Xafan Salina
Secondary
Xafan Salina
Secondary
Xafan Salina
Software Engineer
Xafan Salina
Software Engineer
Xafan Salina
Software Engineer
Xafan Salina
Software Engineer
In a meeting
Xafan Salina
Software Engineer
In a meeting
Available at 4:00pm
Xafan Salina
Software Engineer
In a meeting
Available at 4:00pm
Xafan Salina
CoinSize 150
Xafan Salina
ShowSecondaryText
Style & Class
Style and Class reach the root; Styles and Classes reach each part by name. The public
--bit-Persona-* CSS variables re-skin the coin, texts, rings, presence colors and focus - on
:root, an ancestor or one persona's Style.
They restyle the default, not a choice: an explicit CoinColor (or the color AutoCoinColor picks) and an explicit Shape (or Squared) win over the variables for what they set.
Saleh Khafan
Saleh Khafan
Styles & Classes:
Saleh Khafan
Saleh Khafan
CSS variables, set once on an ancestor - they restyle what the personas leave unset (no Size here, so the gap is the variable's):
Saleh Khafan
Out of office
Ted Randall
Designer
On a tinted surface, --bit-Persona-surface-color cuts the ring's gap and the hollow dots in it:
Xafan Salina
Active
Saleh Khafan
Offline
RTL
Dir Rtl lays the persona out right to left; Latin initials keep their reading order.
صالح یوسف نژاد
مهندس نرم افزار
Saleh Khafan
یک نام لاتین
صالح یوسف نژاد
مهندس نرم افزار
CSS variables
The public custom properties this component reads off its root, for what no parameter covers.
Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property:
set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it,
or on the Style of one instance to restyle it - and any instance nested inside it, which inherits the value too; a parameter changes one alone,
as does the real CSS property on the instance's Style / Styles when that property does not inherit (opacity: 1 keeps
one disabled instance undimmed without undimming a disabled one inside it), while an inherited one such as color or
font-family also reaches the nested instances that do not set it themselves. Leave a variable unset and the component
falls back to the theme token beside it.
BitPersona CSS variables
| Name | Default value | Description |
|---|---|---|
| --bit-Persona-surface-color | --bit-clr-bg-pri | Surface the persona sits on: the Active ring's gap and the inside of the hollow Offline and Blocked dots are cut in it. Set it once for a persona on a tinted card or a dark header. |
| --bit-Persona-gap | spacing(1.5) (Size48's) | Room between the coin and the details. The Size parameter wins over it. |
| --bit-Persona-primary-color | --bit-clr-fg-pri | Text of the primary row. |
| --bit-Persona-primary-font-weight | --bit-tpg-fw-regular | Weight of the primary row. |
| --bit-Persona-secondary-color | --bit-clr-fg-sec | Text of the secondary, tertiary and optional rows. |
| --bit-Persona-disabled-color | --bit-clr-fg-dis | Text of every row when Disabled is true. |
| --bit-Persona-coin-background | --bit-clr-inf | Fill of the coin (the ring and the text of the Outline and Text variants), and the color of the Active ring. The CoinColor and AutoCoinColor parameters win over it. |
| --bit-Persona-coin-color | --bit-clr-inf-text | Initials and coin icon of a Fill coin. The CoinColor and AutoCoinColor parameters win over it. |
| --bit-Persona-coin-radius | 50% | Corner radius of the coin and of its overlay. The Shape and Squared parameters win over it. |
| --bit-Persona-overlay-background | The coin background | Fill of the overlay a clickable coin reveals on hover and focus. |
| --bit-Persona-overlay-color | The coin color | Text of that overlay. |
| --bit-Persona-focus-color | --bit-clr-pri-focus | Focus ring of a clickable or link coin and of the action button. While it is unset, the focus ring is the library's own --bit-shd-focus-ring, so replacing that token re-shapes it too. |
| --bit-Persona-action-background | --bit-clr-bg-pri | Surface of the action button OnActionClick adds. |
| --bit-Persona-action-color | --bit-clr-fg-pri | Glyph of that action button. |
| --bit-Persona-action-hover-background | --bit-Persona-action-background, else --bit-clr-bg-pri-hover | Surface of the action button while hovered; a custom action background keeps itself on hover unless this is set too. |
| --bit-Persona-presence-border-color | --bit-clr-brd-sec | Ring the presence dot is cut out of; match it to the surface the persona sits on. |
| --bit-Persona-presence-icon-color | The status's paired text color (the stroke color on the hollow Offline and Blocked dots) | Glyph a presence icon puts inside the presence dot, and the bar across the Dnd dot. |
| --bit-Persona-presence-online-color | --bit-clr-suc | Fill of the Online dot. |
| --bit-Persona-presence-away-color | --bit-clr-wrn | Fill of the Away dot. |
| --bit-Persona-presence-busy-color | --bit-clr-err | Fill of the Busy dot. |
| --bit-Persona-presence-dnd-color | --bit-clr-err | Fill of the Dnd dot; the bar across it takes --bit-Persona-presence-icon-color. |
| --bit-Persona-presence-out-of-office-color | --bit-clr-swr | Fill of the OutOfOffice dot. |
| --bit-Persona-presence-unknown-color | --bit-clr-fg-ter | Fill of the Unknown dot. |
| --bit-Persona-presence-offline-color | --bit-clr-ntr-gray110 | Stroke of the hollow Offline dot. |
| --bit-Persona-presence-blocked-color | --bit-clr-err | Stroke of the hollow Blocked dot. |
| --bit-Persona-ring-color | The coin background | Ring of an Active coin (Ring and RingShadow). The CoinColor and AutoCoinColor parameters win over it. |
| --bit-Persona-ring-width | 2px (Size48's) | Width of that ring. The Size parameter wins over it. |
| --bit-Persona-ring-gap | 2px (Size48's) | Gap between the coin and that ring. The Size parameter wins over it. |
| --bit-Persona-ring-gap-color | --bit-Persona-surface-color | Color the gap is cut in, when it has to differ from the surface color. |
| --bit-Persona-active-shadow | --bit-shd-card | Shadow of an Active coin (Shadow and RingShadow). |
| --bit-Persona-inactive-opacity | 0.8 | Opacity of an Inactive coin. |
| --bit-Persona-inactive-scale | 0.875 | Scale of an Inactive coin. |
API
Every parameter, public member, sub-class and enum this component exposes.
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? | null | Icon name for the icon button of the custom action. |
| ActionTemplate | RenderFragment? | null | Custom template replacing the default action button. |
| 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. The picked color counts as a choice, like an explicit CoinColor: it wins over the --bit-Persona-coin-background, --bit-Persona-coin-color and --bit-Persona-ring-color variables. |
| 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. An explicit value wins over the --bit-Persona-coin-background, --bit-Persona-coin-color and --bit-Persona-ring-color variables; left unset (and with AutoCoinColor off), the coin is Info unless they say otherwise. |
| 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? | null | Optional custom persona coin size in pixel. |
| CoinTemplate | RenderFragment? | null | 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 of the picture. Unset, the picture is decorative (an empty alt), since the name beside it already says who this is. |
| 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? | null | Custom template for the overlay a clickable coin reveals. |
| 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? | null | 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? | null | Custom primary text template. |
| Rel | BitLinkRels? | null | Sets the rel attribute of the coin when Href renders it as a link. When Target is _blank, noopener is added to it, unless it already says NoOpener, NoReferrer or Opener. |
| Reversed | bool | false | Puts the coin after the texts instead of before them (under them while Vertical is set). |
| SecondaryText | string? | null | Secondary text to display, usually the role of the user. |
| SecondaryTextTemplate | RenderFragment? | null | Custom secondary text template. |
| Shape | BitShape? | null | The outline of the coin: a circle (Pill, the default), a rounded square (Rounded) or a sharp one (Square). Circle is not honoured, since the coin already has the proportions it would ask for, and falls back to the default. Supersedes Squared, and wins over it when both are set. An explicit value wins over --bit-Persona-coin-radius; left unset (and with Squared off), the coin is a circle unless it says otherwise. |
| ShowDefaultPresenceIcons | bool | false | Puts the built-in glyph of each status in the presence dot (a check for Online, a clock for Away, ...), so the statuses differ by shape as well as color. Busy stays a plain disc and Dnd keeps its bar; a glyph of your own takes precedence, and none is drawn under 40px. |
| 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. |
| Size | BitPersonaSize | BitPersonaSize.Size48 | Decides the size of the control. A value given in the markup or by a BitPersonaParams ancestor (Size48 included) wins over --bit-Persona-gap, --bit-Persona-ring-gap and --bit-Persona-ring-width; left unset, those variables restyle it. |
| 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. Like an explicit Shape, it wins over --bit-Persona-coin-radius. |
| 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. |
| Vertical | bool | false | Stacks the coin over the details and centers both, for cards and tiles. Combined with Reversed it puts the details over the coin. |
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. |
| Disabled | bool | false | Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction. |
| 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. An attribute written on the component wins over an entry of the same name. |
| Id | string? | null | Gets or sets the unique identifier for the component's root element. |
| 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 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. |
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. |
BitShape enum
| Name | Value | Description |
|---|---|---|
| Rounded | 0 | The corner radius the current theme gives to this kind of surface, which is what most components draw unless something says otherwise. |
| Square | 1 | Sharp corners with no radius at all, for content that meets its container edge to edge. |
| Pill | 2 | Fully rounded ends, whatever the theme says: a pill where the box is wider than it is tall, and a circle where the box is square. |
| Circle | 3 | A true circle, which takes its diameter from whichever of the height and the width is set rather than leaving the proportions of the box alone. It is the only value that changes the size of what it draws. |
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 | Tells the browser to load the image as soon as the img element is processed, which is what a browser does with an img that has no loading attribute. |
| 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
Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.