Persona

A component that represents a person and their status.

A Persona is a visual representation of a person inside your app. The component consists of an avatar, online status (presence), a name and status messages.

Import#

  • Persona: The wrapper component that handles default composition.
  • PersonaContainer: The container component that provides context and styles.
  • PersonaAvatar: An avatar with optional status badge.
  • PersonaDetails: Wrapper component for the labels.
  • PersonaLabel: The main label, usually a name.
  • PersonaSecondaryLabel: The secondary label, usually the role of a person.
  • PersonaTertiaryLabel: The tertiary label, typically a status message.
  • Presence: The presence configuration object.
import {
Persona,
PersonaContainer,
PersonaAvatar,
PersonaDetails,
PersonaLabel,
PersonaSecondaryLabel,
PersonaTertiaryLabel,
Presence,
} from '@saas-ui/react'

Usage#

Basic persona#

<Persona name="Eelco Wiersma" secondaryLabel="Founder" presence="online" />

Out of office#

Shows an alternative status badge to indicate that the person is out of office.

<Persona
name="Eelco Wiersma"
secondaryLabel="Gone fishing"
presence="dnd"
isOutOfOffice
/>

Persona sizes#

<Stack spacing={8}>
<Persona
name="Eelco Wiersma"
secondaryLabel="Founder"
tertiaryLabel="Available"
presence="online"
size="2xs"
/>
<Persona
name="Eelco Wiersma"
secondaryLabel="Founder"
tertiaryLabel="Available"
presence="online"
size="xs"
/>
<Persona
name="Eelco Wiersma"
secondaryLabel="Founder"
tertiaryLabel="Available"
presence="online"
size="sm"
/>
<Persona
name="Eelco Wiersma"
secondaryLabel="Founder"
tertiaryLabel="Available"
presence="online"
size="md"
/>
<Persona
name="Eelco Wiersma"
secondaryLabel="Founder"
tertiaryLabel="In a meeting"
presence="dnd"
size="lg"
/>
<Persona
name="Eelco Wiersma"
secondaryLabel="Founder"
tertiaryLabel="In a meeting"
presence="dnd"
size="xl"
/>
</Stack>

Hide details#

<Persona
name="Eelco Wiersma"
secondaryLabel="Founder"
presence="online"
hideDetails
/>

Presence#

<Stack>
<HStack>
<Persona name="Eelco Wiersma" presence="online" hideDetails size="sm" />
<Persona name="Eelco Wiersma" presence="offline" hideDetails size="sm" />
<Persona name="Eelco Wiersma" presence="busy" hideDetails size="sm" />
<Persona name="Eelco Wiersma" presence="dnd" hideDetails size="sm" />
<Persona name="Eelco Wiersma" presence="away" hideDetails size="sm" />
</HStack>
<HStack>
<Persona
name="Eelco Wiersma"
presence="online"
hideDetails
isOutOfOffice
size="sm"
/>
<Persona
name="Eelco Wiersma"
presence="offline"
hideDetails
isOutOfOffice
size="sm"
/>
<Persona
name="Eelco Wiersma"
presence="busy"
hideDetails
isOutOfOffice
size="sm"
/>
<Persona
name="Eelco Wiersma"
presence="dnd"
hideDetails
isOutOfOffice
size="sm"
/>
<Persona
name="Eelco Wiersma"
presence="away"
hideDetails
isOutOfOffice
size="sm"
/>
</HStack>
</Stack>

Custom persona#

function CustomPersona({
name = 'Eelco Wiersma',
status = 'Away',
message = 'Back tomorrow',
}) {
return (
<PersonaContainer size="lg">
<Avatar name={name}>
<AvatarBadge boxSize="1em" bg="presence.away">
<TimeIcon />
</AvatarBadge>
</Avatar>
<PersonaDetails>
<PersonaLabel>{name}</PersonaLabel>
<PersonaSecondaryLabel>{status}</PersonaSecondaryLabel>
<PersonaTertiaryLabel>{message}</PersonaTertiaryLabel>
</PersonaDetails>
</PersonaContainer>
)
}

Status icon#

<Persona
name="Eelco Wiersma"
presence="busy"
secondaryLabel={
<>
<PhoneIcon /> On a call
</>
}
/>

Props#

Persona and all sub components accept Box props.

Was this helpful?