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>
<PersonaAvatar name="Eelco Wiersma" presence="online" />
<PersonaDetails>
<PersonaLabel>Eelco Wiersma</PersonaLabel>
<PersonaSecondaryLabel>Founder</PersonaSecondaryLabel>
</PersonaDetails>
</Persona>

Or use the Persona shorthand props.

<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

import { Stack } from '@chakra-ui/react'
import { Persona } from '@saas-ui/react'
export default function Sizes() {
return (
<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

Using the hideDetails prop will hide the labels and only render the avatar.

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

Presence

The presence prop accepts a Presence enum value.

type Presence = 'online' | 'offline' | 'busy' | 'dnd' | 'away'

Each presence value has a corresponding color in the theme, defined as semantic color tokens.

<Stack>
<Text color="presence.online">Online</Text>
<Text color="presence.offline">Offline</Text>
<Text color="presence.busy">Busy</Text>
<Text color="presence.dnd">Do not disturb</Text>
<Text color="presence.away">Away</Text>
</Stack>
import { Stack, HStack } from '@chakra-ui/react'
import { Persona } from '@saas-ui/react'
export default function Sizes() {
return (
<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

import { Avatar, AvatarBadge } from '@chakra-ui/react'
import { FiClock } from 'react-icons/fi'
import {
PersonaContainer,
PersonaDetails,
PersonaLabel,
PersonaSecondaryLabel,
PersonaTertiaryLabel,
} from '@saas-ui/react'
export default function CustomPersona({
name = 'Eelco Wiersma',
status = 'Away',
message = 'Back tomorrow',
}) {
return (
<PersonaContainer size="lg">
<Avatar name={name}>
<AvatarBadge boxSize="1em" border="0" bg="presence.away">
<FiClock />
</AvatarBadge>
</Avatar>
<PersonaDetails>
<PersonaLabel>{name}</PersonaLabel>
<PersonaSecondaryLabel>{status}</PersonaSecondaryLabel>
<PersonaTertiaryLabel>{message}</PersonaTertiaryLabel>
</PersonaDetails>
</PersonaContainer>
)
}

Status icon

import { FiPhone } from 'react-icons/fi'
import { Persona } from '@saas-ui/react'
export default function StatusIcon() {
return (
<Persona
name="Eelco Wiersma"
presence="busy"
secondaryLabel={
<>
<FiPhone /> On a call
</>
}
/>
)
}

Was this helpful?