Avatar

Avatar

Display user profile images or initials in circular containers.

J
X
12345678910111213
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ AvatarDefault() {
	<div class="flex items-center gap-4">
		@popui.Avatar(props.Avatar{Initial: "J"})
		@popui.Avatar(props.Avatar{Size: "lg", Initial: "X"})
	</div>
}

Sizes

Avatar comes in two sizes: default (small) and large (lg).

D
L
12345678910111213
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ AvatarSizes() {
	<div class="flex items-center gap-4">
		@popui.Avatar(props.Avatar{Initial: "D"})
		@popui.Avatar(props.Avatar{Size: "lg", Initial: "L"})
	</div>
}

With Images

You can pass an Image component as a child instead of using the Initial prop.

1234567891011121314151617
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ AvatarWithImages() {
	<div class="flex items-center gap-4">
		@popui.Avatar() {
			@popui.Image(props.Image{Src: "https://i.pravatar.cc/150?img=1"})
		}
		@popui.Avatar(props.Avatar{Size: "lg"}) {
			@popui.Image(props.Image{Src: "https://i.pravatar.cc/150?img=3"})
		}
	</div>
}

API Reference

Avatar

Displays a user avatar with an image or initials in a circular container.

NameTypeDefaultDescription
ID string-Unique identifier for the avatar element
Class string-Additional CSS classes to merge with base styles
Attributes templ.Attributes-Additional HTML attributes to apply to the div element
Initial string-Text to display (typically initials) when no image is provided
Size string"" (default)Size variant: "lg" for large (8x8), default is small (5x5)