Profile picture, user initials or fallback icon.
sizesrcstringAlso supports MarginProps: `m`, `mb`, `ml`, `mr`, `mt`, `mx`, `my`
You can use string methods to get the first character from a name for the avatar text.
5 variants found
<Avatar.Root
size="1"
src={profilePictureUrl ?? undefined}
style={{ width: '15px', height: '15px' }}
>
{!profilePictureUrl && (
<Avatar.Text style={{ fontSize: 10 }}>
{fallbackInitial.charAt(0).toUpperCase()}
</Avatar.Text>
)}
</Avatar.Root><Flex align="center" gap="4">
<Avatar.Root size="3" src={profilePictureUrl}>
{!profilePictureUrl && (
<Avatar.Text>{fullNameWithFallback.at(0)}</Avatar.Text>
)}
</Avatar.Root>
<Flex align="start" direction="column" gap="2">
<Skeleton loading={isLoading}>
<Heading size="5">
{fullNameWithFallback || 'Loading placeholder'}
</Heading>
</Skeleton>
<Flex gap="4">
<Skeleton loading={isLoading}>
<CopyChip color="gray">
<Code variant="ghost">
{user?.id || 'placeholder_1234567890'}
</Code>
</CopyChip>
</Skeleton>
<Skeleton loading={isLoading}>
<CopyChip color="gray">
<Text color="gray" size="2">
{userEmail}
</Text>
</CopyChip>
</Skeleton>
</Flex>
</Flex>
</Flex><Flex align="center" gap="4">
<Avatar.Root size="3" src={profilePictureUrl}>
{!profilePictureUrl && (
<Avatar.Text>{fullNameWithFallback.at(0)}</Avatar.Text>
)}
</Avatar.Root>
<Flex align="start" direction="column" gap="2">
<Skeleton loading={isLoading}>
<Flex align="center" gap="1">
<Heading as="h2" size="5">
{fullNameWithFallback || 'Loading placeholder'}
</Heading>
<TriangleRightIcon color="gray" />
<Heading color="gray" size="5">
{organization?.name || 'Loading placeholder'}
</Heading>
</Flex>
</Skeleton>
<Flex align="center" gap="4">
<Skeleton loading={isLoading}>
{organizationMembership?.id && !isLoading ? (
<CopyChip color="gray">
<Code variant="ghost">{organizationMembership.id}</Code>
</CopyChip>
) : (
<Chip>placeholder_id_12345678901234567890</Chip>
)}
</Skeleton>
{directoryManaged && <Badge color="gray">Directory managed</Badge>}
</Flex>
</Flex>
</Flex>Also supports MarginProps: m, mb, ml, mr, mt, mx, my
Used 30 times across 1 package
size
12 files
Show 2 more files