Persona

A component for displaying user identity information including avatar, name, presence status, and additional details.

Anatomy

<script>
  import {
    Persona,
    PersonaAvatar,
    PersonaPresenceBadge,
    PersonaDetails,
    PersonaLabel,
    PersonaSecondaryLabel,
    PersonaTertiaryLabel,
  } from "@saas-ui/svelte/components/persona";
</script>

<Persona.Root>
  <PersonaAvatar src="/avatar.jpg" name="John Doe" />
  <PersonaPresenceBadge presence="online" />
  <PersonaDetails>
    <PersonaLabel>John Doe</PersonaLabel>
    <PersonaSecondaryLabel>Software Engineer</PersonaSecondaryLabel>
    <PersonaTertiaryLabel>San Francisco, CA</PersonaTertiaryLabel>
  </PersonaDetails>
</Persona.Root>

Examples

Avatar Only Accessibility

Avatar-only personas without the details section for compact displays.

<Stack gap={4} class="flex-row items-center">
	<Persona.Root size="md">
		<Persona.Avatar
			name="David Wilson"
			src="https://api.dicebear.com/9.x/shapes/svg?seed=jacob"
		>
			<Persona.PresenceBadge presence="online" />
		</Persona.Avatar>
	</Persona.Root>

	<Persona.Root size="lg">
		<Persona.Avatar
			name="Marcus Chen"
			src="https://api.dicebear.com/9.x/shapes/svg?seed=marcus"
		>
			<Persona.PresenceBadge presence="busy" />
		</Persona.Avatar>
	</Persona.Root>

	<Persona.Root size="xl">
		<Persona.Avatar
			name="Sarah Johnson"
			src="https://api.dicebear.com/9.x/shapes/svg?seed=sarah"
		>
			<Persona.PresenceBadge presence="away" />
		</Persona.Avatar>
	</Persona.Root>
</Stack>

Basic Accessibility

Basic persona with avatar and user details.

<Persona.Root>
	<Persona.Avatar
		name="David Wilson"
		src="https://api.dicebear.com/9.x/shapes/svg?seed=jacob"
	/>
	<Persona.Details>
		<Persona.Label>David Wilson</Persona.Label>
		<Persona.SecondaryLabel>Software Engineer</Persona.SecondaryLabel>
	</Persona.Details>
</Persona.Root>

Out Of Office Accessibility

Persona showing out of office status using the outOfOffice prop.

<Persona.Root size="lg" outOfOffice presence="away">
	<Persona.Avatar
		name="David Wilson"
		src="https://api.dicebear.com/9.x/shapes/svg?seed=jacob"
	>
		<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>

Presence Accessibility

Persona with presence badge indicator showing online, offline, busy, dnd, or away status.

<Stack gap={4}>
	{#each presenceOptions as presence}
		<Persona.Root size="lg" {presence}>
			<Persona.Avatar
				name="David Wilson"
				src="https://api.dicebear.com/9.x/shapes/svg?seed=jacob"
			>
				<Persona.PresenceBadge />
			</Persona.Avatar>
			<Persona.Details>
				<Persona.Label>David Wilson</Persona.Label>
				<Persona.SecondaryLabel>{presence}</Persona.SecondaryLabel>
			</Persona.Details>
		</Persona.Root>
	{/each}
</Stack>

Presence Ring Accessibility

Persona with ring-style presence indicator using variant="ring".

<Stack gap={4}>
	{#each presenceOptions as presence}
		<Persona.Root size="lg" variant="ring" {presence}>
			<Persona.Avatar
				name="David Wilson"
				src="https://api.dicebear.com/9.x/shapes/svg?seed=jacob"
			>
				<Persona.PresenceBadge />
			</Persona.Avatar>
			<Persona.Details>
				<Persona.Label>David Wilson</Persona.Label>
				<Persona.SecondaryLabel>{presence}</Persona.SecondaryLabel>
			</Persona.Details>
		</Persona.Root>
	{/each}
</Stack>

Shapes Accessibility

Persona with different avatar shapes: rounded, square, and full circle.

<Stack gap={4}>
	{#each avatarShapes as shape}
		<Persona.Root>
			<Persona.Avatar
				name="David Wilson"
				src="https://api.dicebear.com/9.x/shapes/svg?seed=jacob"
				{shape}
			/>
			<Persona.Details>
				<Persona.Label>David Wilson</Persona.Label>
				<Persona.SecondaryLabel>{shape}</Persona.SecondaryLabel>
			</Persona.Details>
		</Persona.Root>
	{/each}
</Stack>

Sizes Accessibility

Persona in different sizes. Available sizes: 2xs, xs, sm, md, lg, xl, 2xl.

<Stack gap={4}>
	{#each personaSizes as size}
		<Persona.Root {size}>
			<Persona.Avatar
				name="David Wilson"
				src="https://api.dicebear.com/9.x/shapes/svg?seed=jacob"
			/>
			<Persona.Details>
				<Persona.Label>David Wilson</Persona.Label>
				<Persona.SecondaryLabel>Software Engineer</Persona.SecondaryLabel>
			</Persona.Details>
		</Persona.Root>
	{/each}
</Stack>

With Ring Accessibility

Persona with a coloured ring around the avatar for visual emphasis.

<Stack gap={4}>
	<Persona.Root size="lg">
		<Persona.Avatar
			name="David Wilson"
			src="https://api.dicebear.com/9.x/shapes/svg?seed=jacob"
			colour="pink"
			ring>
			<Persona.PresenceBadge presence="online" />
		</Persona.Avatar>
		<Persona.Details>
			<Persona.Label>David Wilson</Persona.Label>
			<Persona.SecondaryLabel>Software Engineer</Persona.SecondaryLabel>
		</Persona.Details>
	</Persona.Root>

	<Persona.Root size="lg">
		<Persona.Avatar
			name="Marcus Chen"
			src="https://api.dicebear.com/9.x/shapes/svg?seed=marcus"
			colour="green"
			ring>
			<Persona.PresenceBadge presence="busy" />
		</Persona.Avatar>
		<Persona.Details>
			<Persona.Label>Marcus Chen</Persona.Label>
			<Persona.SecondaryLabel>Product Designer</Persona.SecondaryLabel>
		</Persona.Details>
	</Persona.Root>

	<Persona.Root size="lg">
		<Persona.Avatar
			name="Sarah Johnson"
			src="https://api.dicebear.com/9.x/shapes/svg?seed=sarah"
			colour="blue"
			ring>
			<Persona.PresenceBadge presence="away" />
		</Persona.Avatar>
		<Persona.Details>
			<Persona.Label>Sarah Johnson</Persona.Label>
			<Persona.SecondaryLabel>Engineering Manager</Persona.SecondaryLabel>
		</Persona.Details>
	</Persona.Root>
</Stack>

Props

Prop	Type	Default	Description
`size`	`2xs \| xs \| sm \| md \| lg \| xl \| 2xl`	`md`	The size of the component.
`variant`	`badge \| ring`	`badge`	The variant of the presence indicator.
`presence`	`online \| offline \| busy \| dnd \| away`	-	The presence status.
`outOfOffice`	`boolean`	`false`	Whether the person is out of office.
`children`	`any`	-	The content to be rendered inside the component.
`class`	`text`	-	Additional CSS classes to apply.