Skip to content

LivePersona control

This control allows you to use LivePersona Card available on SharePoint Online.


The LivePersona Card uses an internal SharePoint Component and it can be changed in the future. Use at your own risk and be conscious that it's behaviour can be changed


Here is an example of the control:


How to use this control in your solutions

  • Check that you installed the @pnp/spfx-controls-react dependency. Check out the getting started page for more information about installing the dependency.
  • Import the control into your component:
import { LivePersona } from "@pnp/spfx-controls-react/lib/LivePersona";
  • Use the LivePersona control in your code as follows:
<LivePersona upn=""
      <Persona text="João Mendes" secondaryText="" coinSize={48} />


The LivePersona control can be configured with the following properties:

Property Type Required Description
serviceScope ServiceScope yes The SPFx ServiceScope object loaded from context of web part or extension.
upn string yes User UPN.
disableHover boolean no If info should not appear on hover.
template string | JSX.Element yes The content to wrap with persona info.