DW
David WilsonSoftware Engineer
'use client'
import { Persona } from '@saas-ui/react'
export const PersonaBasic = () => {
return (
<Persona.Root>
<Persona.Avatar name="David Wilson" src="/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="/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="/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
DW
David WilsonSoftware Engineer
'use client'
import { Persona } from '@saas-ui/react'
export const PersonaWithPresence = () => {
return (
<Persona.Root presence="online">
<Persona.Avatar name="David Wilson" src="/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>
)
}
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>
<Persona.Avatar name="David Wilson" src="/avatars/1.png" />
<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="/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',
})