Avatar

An image with a fallback for the user.

1 file

<div class="flex items-center gap-4">
  <pb-ui.avatar src="https://github.com/shadcn.png" alt="@shadcn" fallback="CN" />
  <pb-ui.avatar fallback="PL" />
  <pb-ui.avatar fallback="AM" class="size-12 text-base" />
</div>

Installation

pyblade-ui add avatar

Copy this file into your project

components/ui/avatar.html

@props({'src': None, 'alt': '', 'fallback': ''})
<span data-slot="avatar" {{ attributes.cn("relative flex size-8 shrink-0 overflow-hidden rounded-full") }}>
  @if(src)
  <img src="{{ src }}" alt="{{ alt }}" class="aspect-square size-full object-cover" />
  @else
  <span class="flex size-full items-center justify-center rounded-full bg-muted text-xs font-medium">{{ fallback }}</span>
  @endif
</span>

Update the path to fit your project
The components folder is the one set in pyblade.toml.

Usage

The tag <pb-ui.avatar> is available in all your templates.

<pb-ui.avatar :src="user.photo_url" fallback="JD" />

Examples

Group

<div class="flex -space-x-2">
  <pb-ui.avatar fallback="AL" class="ring-2 ring-background" />
  <pb-ui.avatar fallback="GH" class="ring-2 ring-background" />
  <pb-ui.avatar fallback="AT" class="ring-2 ring-background" />
  <pb-ui.avatar fallback="+3" class="ring-2 ring-background" />
</div>

Props

Prop	Default
src	None
alt	''
fallback	''

Any other attribute (class, id, x-on:click, hx-post…) is passed to the root element; your Tailwind classes win over the component's.

‹ Badge Alert ›