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.




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.


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.


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.