DW
David WilsonSoftware Engineer
'use client'
import { Persona } from '@saas-ui/react'
export const PersonaBasic = () => {
return (
<Persona.Root>
<Persona.Avatar name="David Wilson" src="/img/avatars/1.png" />
<Persona.Details>
<Persona.Label>David Wilson</Persona.Label>
<Persona.SecondaryLabel>Software Engineer</Persona.SecondaryLabel>
</Persona.Details>
</Persona.Root>
)
}
Anatomy
import { Persona } from '@saas-ui/react/persona'<Persona.Root>
<Persona.Avatar>
<Persona.PresenceBadge />
</Persona.Avatar>
<Persona.Details>
<Persona.Label />
<Persona.SecondaryLabel />
<Persona.TertiaryLabel />
</Persona.Details>
</Persona.Root>Examples
Sizes
Use the size prop to change the size of the avatar
DW
David WilsonSoftware Engineer
DW
David WilsonSoftware Engineer
DW
David WilsonSoftware Engineer
DW
David WilsonSoftware Engineer
DW
David WilsonSoftware Engineer
DW
David WilsonSoftware Engineer
'use client'
import { Persona, Stack } from '@saas-ui/react'
const sizes = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const
export const PersonaSizes = () => {
return (
<Stack>
{sizes.map((size) => (
<Persona.Root key={size} size={size}>
<Persona.Avatar name="David Wilson" src="/img/avatars/1.png" />
<Persona.Details>
<Persona.Label>David Wilson</Persona.Label>
<Persona.SecondaryLabel>Software Engineer</Persona.SecondaryLabel>
</Persona.Details>
</Persona.Root>
))}
</Stack>
)
}
Shape
Use the shape prop to change the shape of the avatar, from rounded to
square
DW
MC
SJ
'use client'
import { Persona, Stack } from '@saas-ui/react'
export const PersonaWithShape = () => {
return (
<Stack gap="4">
<Persona.Root>
<Persona.Avatar
name="David Wilson"
src="/img/avatars/1.png"
shape="square"
/>
</Persona.Root>
<Persona.Root>
<Persona.Avatar
name="Marcus Chen"
src="/avatars/2.png"
shape="rounded"
/>
</Persona.Root>
<Persona.Root>
<Persona.Avatar
name="Sarah Johnson"
src="/avatars/3.png"
shape="full"
/>
</Persona.Root>
</Stack>
)
}
Presence
Use the presence prop to change the presence of the avatar. Available presence
options are online, busy, away, dnd, and offline.
DW
David WilsonSoftware Engineer
DW
David WilsonSoftware Engineer
DW
David WilsonSoftware Engineer
DW
David WilsonSoftware Engineer
DW
David WilsonSoftware Engineer
'use client'
import { Persona, Stack } from '@saas-ui/react'
const presenceOptions = ['online', 'busy', 'dnd', 'away', 'offline'] as const
export const PersonaWithPresence = () => {
return (
<Stack>
{presenceOptions.map((presence) => (
<Persona.Root presence={presence}>
<Persona.Avatar name="David Wilson" src="/img/avatars/1.png">
<Persona.PresenceBadge />
</Persona.Avatar>
<Persona.Details>
<Persona.Label>David Wilson</Persona.Label>
<Persona.SecondaryLabel>Software Engineer</Persona.SecondaryLabel>
</Persona.Details>
</Persona.Root>
))}
</Stack>
)
}
Presence Ring
The variant prop can be set to ring to add a ring around the avatar to
indicate the presence.
DW
David WilsonSoftware Engineer
DW
David WilsonSoftware Engineer
DW
David WilsonSoftware Engineer
DW
David WilsonSoftware Engineer
DW
David WilsonSoftware Engineer
'use client'
import { Persona, Stack } from '@saas-ui/react'
const presenceOptions = ['online', 'busy', 'dnd', 'away', 'offline'] as const
export const PersonaWithPresenceRing = () => {
return (
<Stack>
{presenceOptions.map((presence) => (
<Persona.Root presence={presence} variant="ring">
<Persona.Avatar name="David Wilson" src="/img/avatars/1.png">
<Persona.PresenceBadge />
</Persona.Avatar>
<Persona.Details>
<Persona.Label>David Wilson</Persona.Label>
<Persona.SecondaryLabel>Software Engineer</Persona.SecondaryLabel>
</Persona.Details>
</Persona.Root>
))}
</Stack>
)
}
Out of office
Use the outOfOffice prop to change the out of office status of the avatar
DW
David WilsonSoftware EngineerOn a road trip
'use client'
import { Persona } from '@saas-ui/react'
export const PersonaOutOfOffice = () => {
return (
<Persona.Root outOfOffice presence="away">
<Persona.Avatar name="David Wilson" src="/img/avatars/1.png">
<Persona.PresenceBadge />
</Persona.Avatar>
<Persona.Details>
<Persona.Label>David Wilson</Persona.Label>
<Persona.SecondaryLabel>Software Engineer</Persona.SecondaryLabel>
<Persona.TertiaryLabel>On a road trip</Persona.TertiaryLabel>
</Persona.Details>
</Persona.Root>
)
}
Ring
Use the outline* props to add a ring around the avatar
DW
David WilsonSoftware Engineer
'use client'
import { Persona, defineStyle } from '@saas-ui/react'
export const PersonaWithRing = () => {
return (
<Persona.Root presence="online">
<Persona.Avatar
name="David Wilson"
src="/img/avatars/1.png"
css={ringCss}
/>
<Persona.Details>
<Persona.Label>David Wilson</Persona.Label>
<Persona.SecondaryLabel>Software Engineer</Persona.SecondaryLabel>
</Persona.Details>
</Persona.Root>
)
}
const ringCss = defineStyle({
outlineWidth: '2px',
outlineColor: 'var(--persona-presence)',
outlineOffset: '2px',
outlineStyle: 'solid',
})