ActionPersona

ActionPersona displays a user as a persona (avatar + name) and reveals a hover card with quick actions — email, and optionally a Microsoft Teams chat. Point it at a SharePoint site for automatic profile pictures, or supply the picture URL yourself.

When to use

• Show a person in a card, table cell, or header with quick contact actions.
• People-centric UIs (owners, assignees, authors) in SharePoint or Code Apps.

Import

import { ActionPersona } from '@spartanfx/react';

Basic usage

user is required — at minimum an email and a display title.

<ActionPersona
  user={{
    email: 'ada@contoso.com',
    title: 'Ada Lovelace',
    secondaryText: 'Engineering Lead',
  }}
  baseUrl="https://contoso.sharepoint.com/sites/projects"
/>

Teams chat and sizing

import { ActionPersona } from '@spartanfx/react';
import { PersonaSize } from '@fluentui/react';

<ActionPersona
  user={{ email: 'ada@contoso.com', title: 'Ada Lovelace' }}
  profilePictureUrl="https://…/ada.jpg"
  size={PersonaSize.size48}
  allowTeamChat
  shadow
/>

Key props

Prop	Type	Notes
user (required)	IActionPersonaUser	email + title, plus optional secondaryText / tertiaryText.
baseUrl	string	SharePoint site root — used to resolve the profile picture.
profilePictureUrl	string	Explicit picture URL (alternative to baseUrl).
allowTeamChat	boolean	Show a Microsoft Teams chat action.
size	PersonaSize	Persona size variant.
shadow	boolean	Elevated shadow with subtle glow.
accentColor	string	Highlight color (defaults to theme primary).

See the full generated reference: ActionPersona API ↗.

See also

• Components overview