Persona

A component that represents a person and their status.

Props

Persona and all sub components accept Box props.

Persona

PropTypeDefaultDescription
badgeSizeResponsiveValue<number | "px" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | ... 62 more ... | "container.2xl">The badge size. Defaults to 1em. Use em value to keep the size relative to the avatar.
colorScheme"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram" | "primary" | "secondary" | "indigo"The visual color appearance of the component
crossOrigin"" | "anonymous" | "use-credentials"
getInitials(name: string) => stringFunction to get the initials to display
hideDetailsbooleanHide the persona details next to the avatar.
iconReactElement<any, string | JSXElementConstructor<any>>The default avatar used as fallback when name, and src is not specified.
iconLabelstring
ignoreFallbackbooleanfalseIf true, opt out of the avatar's fallback logic and renders the img at all times.
isOutOfOfficebooleanIndicates that a person is out of office. Changes the presence badge style.
labelstring | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>Primary label of the persona, defaults to the name
loading"eager" | "lazy"Defines loading strategy
namestringThe name of the person in the avatar. - if src has loaded, the name will be used as the alt attribute of the img - If src is not loaded, the name will be used to create the initials
onError() => voidFunction called when image failed to load
presencestringThe presence status of the person If set will add an AvatarBadge with color configured in Presence Default presence options: - online - offline - busy - dnd - away
presenceIconstring | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>The icon shown in the AvatarBadge
presenceLabelstringThe textual presence status of the person. Online, Offline, Busy, Do-not-disturb or Away
referrerPolicyHTMLAttributeReferrerPolicyDefining which referrer is sent when fetching the resource.
secondaryLabelstring | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>Secondary label, usually the role of the person Only visible from md size and up.
showBorderbooleanfalseIf true, the Avatar will show a border around it. Best for a group of avatars
size"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"mdThe size of the Persona
srcstringThe image url of the Avatar
srcSetstringList of sources to use for different screen resolutions
tertiaryLabelstring | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>Tertiary label, usually the status of the person. Only visible from lg size and up.
variantstringThe variant of the Persona

Was this helpful?