Persona Preview
A persona is a representation of a person with additional contextual information.
Personas usually include an avatar, a presence badge, and up to four lines of text content that provide additional data about that person.
Resources
Layout
Text slot wrapping
By default, the text slots in the persona will wrap to the next line when the container becomes too small.
Presence only
In busy layouts, or layout where space is confined, use the presenceOnly prop to remove the avatar from the persona. This results in the presence badge showing near the person’s name.
Accessibility
By default, personas are static elements that don’t have states built in. However, if you include additional interactions to provide more context or information, be sure to author in states and keyboarding interactions.
To include a focus state, use createFocusOutlineStyle. Be sure to include a tab index so that the interaction the persona enables is accessible to people navigating via keyboard.
Content
Personas should offer brief, at-a-glance information about a person. A single word or short phrase in each slot is best. If you need to offer more information, try building in an interaction like opening a popover with more details.
Use sentence-style capitalization—only capitalize the first word—and skip the periods in persona text slots. For more info, see Capitalization and Periods in the Microsoft Writing Style Guide.