Default Avatar

A circle avatar in various sizes.

Usage Example

// Default Avatar (reactive — sized by the shared Alpine scope)
@avatar.Avatar(avatar.Config{
    Src:      "/assets/images/avatars/avatar-8.webp",
    Alt:      "Rounded avatar",
    Reactive: true,
})

Square Avatar

A square avatar in various sizes with an adjustable border radius.

Square Avatar

@avatar.Avatar(avatar.Config{
    Src:            "/assets/images/avatars/avatar-8.webp",
    Alt:            "Square avatar",
    Shape:          avatar.ShapeSquare,
    Radius:         avatar.RadiusMD,
    Reactive:       true,
    ReactiveRadius: true,
})

Avatar with Icon Placeholder

An avatar in various colors with an icon placeholder.

Avatar with Icon Placeholder

@avatar.Avatar(avatar.Config{Variant: avatar.Default, Reactive: true})
@avatar.Avatar(avatar.Config{Variant: avatar.Inverse, Reactive: true})
@avatar.Avatar(avatar.Config{Variant: avatar.Primary, Reactive: true})
@avatar.Avatar(avatar.Config{Variant: avatar.Secondary, Reactive: true})
@avatar.Avatar(avatar.Config{Variant: avatar.Info, Reactive: true})
@avatar.Avatar(avatar.Config{Variant: avatar.Success, Reactive: true})
@avatar.Avatar(avatar.Config{Variant: avatar.Warning, Reactive: true})
@avatar.Avatar(avatar.Config{Variant: avatar.Danger, Reactive: true})

Avatar with Initials Placeholder

An avatar in various colors with an initials placeholder.

Avatar with Initials Placeholder

@avatar.Avatar(avatar.Config{Initials: "JS", Variant: avatar.Default, Reactive: true})
@avatar.Avatar(avatar.Config{Initials: "JS", Variant: avatar.Inverse, Reactive: true})
@avatar.Avatar(avatar.Config{Initials: "JS", Variant: avatar.Primary, Reactive: true})
@avatar.Avatar(avatar.Config{Initials: "JS", Variant: avatar.Secondary, Reactive: true})
@avatar.Avatar(avatar.Config{Initials: "JS", Variant: avatar.Info, Reactive: true})
@avatar.Avatar(avatar.Config{Initials: "JS", Variant: avatar.Success, Reactive: true})
@avatar.Avatar(avatar.Config{Initials: "JS", Variant: avatar.Warning, Reactive: true})
@avatar.Avatar(avatar.Config{Initials: "JS", Variant: avatar.Danger, Reactive: true})

Avatar with Border

An avatar with a border in various colors.

Avatar with Border

@avatar.Avatar(avatar.Config{Src: "...", Border: true, BorderColor: "border-info", Reactive: true})
@avatar.Avatar(avatar.Config{Src: "...", Border: true, BorderColor: "border-success", Reactive: true})
@avatar.Avatar(avatar.Config{Src: "...", Border: true, BorderColor: "border-warning", Reactive: true})
@avatar.Avatar(avatar.Config{Src: "...", Border: true, BorderColor: "border-danger", Reactive: true})

Avatar with Status Indicator

An avatar with a status indicator in various colors.

Avatar with Status Indicator

@avatar.Avatar(avatar.Config{Src: "...", Status: avatar.StatusOffline, Reactive: true})
@avatar.Avatar(avatar.Config{Src: "...", Status: avatar.StatusInfo, Reactive: true})
@avatar.Avatar(avatar.Config{Src: "...", Status: avatar.StatusSuccess, Reactive: true})
@avatar.Avatar(avatar.Config{Src: "...", Status: avatar.StatusWarning, Reactive: true})
@avatar.Avatar(avatar.Config{Src: "...", Status: avatar.StatusDanger, Reactive: true})

Stacked Avatars

A stacked avatar group in various sizes.

Stacked Avatars

@avatar.AvatarStack(avatar.StackConfig{
    Label:    "Team members",
    Reactive: true,
    Items: []avatar.Config{
        {Src: "/assets/images/avatars/avatar-8.webp", Alt: "Aiden Walker"},
        {Src: "/assets/images/avatars/avatar-3.webp", Alt: "Emily Rodriguez"},
        {Src: "/assets/images/avatars/avatar-5.webp", Alt: "Alex Martinez"},
        {Src: "/assets/images/avatars/avatar-1.webp", Alt: "Bob Johnson"},
    },
})

Fixed Size (image load/error)

Set an explicit Size (not Reactive) for a fixed avatar. With a Name and no/failed Src, the avatar falls back to initials.

Fixed Size (image load/error)

@avatar.Avatar(avatar.Config{Src: imgURL, Name: "Load Test", Size: avatar.SizeMD})
@avatar.Avatar(avatar.Config{Src: "/missing.png", Name: "Error Fallback", Size: avatar.SizeMD})
@avatar.Avatar(avatar.Config{Name: "Initials Only", Size: avatar.SizeMD, Variant: avatar.Primary})

API Reference

Prop	Type	Default	Description
`Src`	`string`	`""`	Image URL (falls back to initials/icon on error).
`Alt`	`string`	`""`	Image alt text.
`Name`	`string`	`""`	Full name used to derive initials when Src is missing/broken.
`Initials`	`string`	`""`	Explicit initials (overrides Name-derived).
`Size`	`Size`	`SizeMD`	Fixed size: "xs", "sm", "md", "lg", "xl", "2xl" (ignored when Reactive).
`Variant`	`Variant`	`Default`	Color for initials/icon: default, primary, secondary, info, success, warning, danger.
`Shape`	`Shape`	`ShapeCircle`	Shape: "circle" or "square".
`Radius`	`Radius`	`RadiusDefault`	Square-avatar radius: "none", "xs", "sm", "md", "lg".
`Border`	`bool`	`false`	Add a ring border.
`BorderColor`	`string`	`""`	Tailwind border color class for the ring.
`Status`	`Status`	`""`	Presence dot: "offline", "info", "success", "warning", "danger".
`Icon`	`templ.Component`	`nil`	Custom placeholder icon (overrides the default user icon).
`Reactive`	`bool`	`false`	Read size classes from the parent Alpine scope (avatarSizeClass) instead of Size.
`ReactiveRadius`	`bool`	`false`	Read square radius classes from the parent Alpine scope (avatarRadiusClass).
`RootClass`	`string`	`""`	Extra classes on the avatar root.
`StackConfig.Items`	`[]avatar.Config`	`nil`	Avatar configs rendered as an overlapping group.
`StackConfig.Label`	`string`	`"Avatar group"`	Accessible label for the stacked avatar group.
`StackConfig.RootClass`	`string`	`""`	Extra classes on the stack root.
`StackConfig.Reactive`	`bool`	`false`	Apply the shared reactive size binding to every stack item.

Accordion Badge