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?