styple

Avatar

Image with a fallback for representing profiles and users.

Examples

+183

import { Avatar, AvatarGroup } from "@styple/design-system";

<Flex
  css={{
    flexDirection: "column",
    alignItems: "flex-start",
    gap: "$md",
  }}
>
  // For examples sake, src/alt props are required.
  <Flex css={{ gap: "$sm" }}>
    <Avatar fallback="M" />
    <Avatar fallback="M" size="md" />
    <Avatar fallback="M" size="lg" />
    <Avatar fallback="M" size="xl" />
  </Flex>
  
  <Flex css={{ gap: "$sm" }}>
    <Avatar src="/founder.webp" fallback="M" />
    <Avatar src="/founder.webp" fallback="M" size="md" />
    <Avatar src="/founder.webp" fallback="M" size="lg" />
    <Avatar src="/founder.webp" fallback="M" size="xl" />
  </Flex>

  <Flex css={{ gap: "$sm" }}>
      <Avatar src="/founder.webp" fallback="M" status="normal" />
      <Avatar src="/founder.webp" fallback="M" status="primary"  />
      <Avatar src="/founder.webp" fallback="M" status="accent" size="md" />
      <Avatar src="/founder.webp" fallback="M" status="danger" size="lg" />
      <Avatar src="/founder.webp" fallback="M" status="success" size="xl" />
    </Flex>

  <Flex css={{ gap: "$sm" }}>
    <Avatar src="/founder.webp" fallback="M" size="md" inactive />
    <Button
      ghost
      css={{
        p: "0",
      }}
    >
      <Avatar src="/founder.webp" fallback="M" size="md" interactive />
    </Button>
  </Flex>

  <AvatarGroup>
    <Avatar src="/founder.webp" fallback="M" size="lg" />
    <Avatar src="/founder.webp" fallback="M" size="lg" />
    <Avatar src="/founder.webp" fallback="M" size="lg" />
    <Avatar src="/founder.webp" fallback="M" size="lg" />
  </AvatarGroup>
  <AvatarGroup limit={2}>
    <Avatar src="/founder.webp" fallback="M" size="lg" />
    <Avatar src="/founder.webp" fallback="M" size="lg" />
    <Avatar src="/founder.webp" fallback="M" size="lg" />
    <Avatar src="/founder.webp" fallback="M" size="lg" />
  </AvatarGroup>
  <AvatarGroup num={183}>
    <Avatar src="/founder.webp" fallback="M" />
    <Avatar src="/founder.webp" fallback="M" />
    <Avatar src="/founder.webp" fallback="M" />
  </AvatarGroup>
</Flex>

API Reference

See Radix-UI Avatar (v0.1.4) for details. This only covers styple abstractions.

Avatar

A styled abstraction for Avatar.Root, Avatar.Image, Avatar.Fallback. Custom props:

Prop	Type	Default	Explanation
`size`	`string`	`"sm"`	Size variant.
`inactive?`	`boolean`	-	Inactive variant.
`interactive?`	`boolean`	-	Interactive variant.
`alt`	`string`	-	Image alt.
`src`	`string`	-	Image source.
`fallback?`	`ReactNode`	-	Fallback element if image doesn't render.
`status?`	`string`	-	Profile/user status.
`statusShadowColor`	`color`	`"$bg200"`	Color of status shadow. Accepts valid css color or token. Only displays when a status is set.

AvatarGroup

A styled div for grouping multiple avatars. Custom props:

Prop	Type	Default	Explanation
`limit?`	`number`	-	Limit the display of avatars within group and show hidden with a number.
`num?`	`number`	-	Display a custom number next to group.

AlertDialog

Badge