Avatar

Avatars are visual representations of users that appear throughout the UI, typically used in user profiles, comments, and navigation.

Component preview

import * as UI from "@iyk/ui"

export default () => (
  <div className="flex gap-4">
    <UI.Avatar
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
      alt="User avatar"
      className="h-12 w-12"
    />
    <UI.Avatar className="h-12 w-12" /> {/* Shows default placeholder */}
  </div>
)

Props

variant

"circle" | "rounded"

The shape of the avatar. Defaults to "circle"

src

string

The source URL of the avatar image. If not provided, a default placeholder will be shown

Variants

The Avatar component supports two variants: circle (default) and rounded.

import * as UI from "@iyk/ui"

export default () => (
  <div className="flex gap-4">
    <UI.Avatar
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
      alt="User avatar"
      className="h-12 w-12"
    />
    <UI.Avatar className="h-12 w-12" /> {/* Shows default placeholder */}
  </div>
)

import * as UI from "@iyk/ui"

export default () => (
  <div className="flex gap-4">
    <UI.Avatar
      variant="rounded"
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
      alt="User avatar"
      className="h-12 w-12"
    />
    <UI.Avatar variant="rounded" className="h-12 w-12" /> {/* Shows default placeholder */}
  </div>
)