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.
Source
Theme source
@saas-ui/persona
- 2.11.2 (latest)
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.
<Personaname="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}><Personaname="Eelco Wiersma"secondaryLabel="Founder"tertiaryLabel="Available"presence="online"size="2xs"/><Personaname="Eelco Wiersma"secondaryLabel="Founder"tertiaryLabel="Available"presence="online"size="xs"/><Personaname="Eelco Wiersma"secondaryLabel="Founder"tertiaryLabel="Available"presence="online"size="sm"/><Personaname="Eelco Wiersma"secondaryLabel="Founder"tertiaryLabel="Available"presence="online"size="md"/><Personaname="Eelco Wiersma"secondaryLabel="Founder"tertiaryLabel="In a meeting"presence="dnd"size="lg"/><Personaname="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.
<Personaname="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" /><Personaname="Eelco Wiersma"presence="offline"hideDetailssize="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><Personaname="Eelco Wiersma"presence="online"hideDetailsisOutOfOfficesize="sm"/><Personaname="Eelco Wiersma"presence="offline"hideDetailsisOutOfOfficesize="sm"/><Personaname="Eelco Wiersma"presence="busy"hideDetailsisOutOfOfficesize="sm"/><Personaname="Eelco Wiersma"presence="dnd"hideDetailsisOutOfOfficesize="sm"/><Personaname="Eelco Wiersma"presence="away"hideDetailsisOutOfOfficesize="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 (<Personaname="Eelco Wiersma"presence="busy"secondaryLabel={<><FiPhone /> On a call</>}/>)}
Was this helpful?