Persona
Persona renders icons representing people or groups.
Examples
Persona Initials:
LB
LB
LB
LB
LB
LB
LB
LB
LB
Persona Image:
Usage
Use persona to represent a person or account.
Render their image if you have one, or fall back on a colored circle and their initials if you don't. If you don't know who they are, we'll render a default icon on a grey background. Don't provide your own "unknown" image.
APIs
IIdentityDetailsProvider
getDisplayName
(): string | undefined
Gets the user's displayname.
getIdentityImageUrl
(size: number): string | undefined
Return a URL to a profile image suitable for display at size pixels.
onRenderPersonaCardoptional
(image: HTMLElement, onDismiss: () => void): JSX.Element
(optional) Render an element to display on delayed hover of the VssPersona
e.g. a profile card or tooltip containing the full display name
IVssPersonaProps
ariaLabel
string | null
aria-label to be used for the VssPersona. If this prop is undefined, the component will automatically include an aria-label
based on the display name. A value of null indicates that no ariaLabel should be added. The use case for this is a situation
where the display name is also in the DOM - which could cause screen readers to read the name multiple times.
className
string
cssClass
string
dataIsFocusable
boolean
Set when VssPersona is within a focus zone
displayName
string
Optional, if provided the name to generate the tooltip and initials to use for the persona coin. Used if identityDetailsProvider is not set
imageUrl
string
Optional, if provided the image url for the Icon. Used if identityDetailsProvider is not set
imgAltText
string
Alternate text for VSSPersona image to display when image load does not succeed
isTabStop
boolean
Set when VssPersona is a tab stop but not in focus zone
onImageError
(event: React.SyntheticEvent<HTMLImageElement>) => void
Optional callback on image load error
showInitialsOnImageError
boolean
Optional callback on image load error
size
VssPersonaSize
Size of image to display. Use VssPersonaSize presets.
suppressPersonaCard
boolean
If true, do not show persona card on hover