A persona 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 inclues 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 persona control is used in the PeoplePicker and Facepile controls.

For more details and examples visit the official docs. The R package can not handle each and every case, so for advanced use cases you need to work using the original docs to achieve the desired result.

Persona(...)

Arguments

className

string
Additional CSS class(es) to apply to the Persona

componentRef

IRefObject<IPersona>
Optional callback to access the IPersona interface. Use this instead of ref for accessing the public methods and properties of the component.

onRenderOptionalText

IRenderFunction<IPersonaProps>
Optional custom renderer for the optional text.

onRenderPrimaryText

IRenderFunction<IPersonaProps>
Optional custom renderer for the primary text.

onRenderSecondaryText

IRenderFunction<IPersonaProps>
Optional custom renderer for the secondary text.

onRenderTertiaryText

IRenderFunction<IPersonaProps>
Optional custom renderer for the tertiary text.

styles

IStyleFunctionOrObject<IPersonaStyleProps, IPersonaStyles>
Call to provide customized styling that will layer on top of variant rules

allowPhoneInitials

boolean
Whether initials are calculated for phone numbers and number sequences. Example: Set property to true to get initials for project names consisting of numbers only.

coinProps

IPersonaCoinProps
Optional HTML element props for Persona coin.

coinSize

number
Optional custom persona coin size in pixel.

hidePersonaDetails

boolean
Whether to not render persona details, and just render the persona image/initials.

imageAlt

string
Alt text for the image to use. Defaults to an empty string.

imageInitials

string
The user's initials to display in the image area when there is no image.

imageShouldFadeIn

boolean
If true, adds the css class 'is-fadeIn' to the image.

imageShouldStartVisible

boolean
If true, the image starts as visible and is hidden on error. Otherwise, the image is hidden until it is successfully loaded. This disables imageShouldFadeIn.

imageUrl

string
Url to the image to use, should be a square aspect ratio and big enough to fit in the image area.

initialsColor

PersonaInitialsColor | string
The background color when the user's initials are displayed.

isOutOfOffice

boolean
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.

onPhotoLoadingStateChange

(newImageLoadState: ImageLoadState) => void
Optional callback for when loading state of the photo changes

onRenderCoin

IRenderFunction<IPersonaSharedProps>
Optional custom renderer for the coin

onRenderInitials

IRenderFunction<IPersonaSharedProps>
Optional custom renderer for the initials

onRenderPersonaCoin

IRenderFunction<IPersonaSharedProps>
Optional custom renderer for the coin

optionalText

string
Optional text to display, usually a custom message set. The optional text will only be shown when using size100.

presence

PersonaPresence
Presence of the person to display - will not display presence if undefined.

presenceColors

{ available: string; away: string; busy: string; dnd: string; offline: string; oof: string; background: string; }
The colors to be used for the presence-icon and it's background

presenceTitle

string
Presence title to be shown as a tooltip on hover over the presence icon.

primaryText

string
Primary text to display, usually the name of the person.

secondaryText

string
Secondary text to display, usually the role of the user.

showInitialsUntilImageLoads

boolean
If true renders the initials while the image is loading. This only applies when an imageUrl is provided.

showSecondaryText

boolean

showUnknownPersonaCoin

boolean
If true, show the special coin for unknown persona. It has '?' in place of initials, with static font and background colors

size

PersonaSize
Decides the size of the control.

tertiaryText

string
Tertiary text to display, usually the status of the user. The tertiary text will only be shown when using size72 or size100.

text

string
Primary text to display, usually the name of the person.

theme

ITheme
Theme provided by High-Order Component.

Best practices

Layout

  • Use the 24-pixel persona in text fields in read-only mode or in experiences like multicolumn lists which need compact persona representations.

  • Use the 32-pixel persona in text fields in edit mode.

  • Use the 32-pixel, 40-pixel, and 48-pixel persona in menus and list views.

  • Use the 72-pixel and 100-pixel persona in profile cards and views.

Content

  • Change the values of the color swatches in high contrast mode.

Examples

library(shiny.fluent)

if (interactive()) {
  shinyApp(
    ui = Persona(
      imageInitials = "AL",
      text = "Annie Lindqvist",
      secondaryText = "Software Engineer",
      presence = 4
    ),
    server = function(input, output) {}
  )
}