Skip to content
v0.2.7

Avatar

A circle avatar in various sizes.

Default Rendered example
Rounded avatar
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 Rendered example
Square avatar
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 Rendered example
Avatar with Icon Placeholder 
@avatar.Avatar(avatar.Config{Tone: avatar.ToneDefault, Reactive: true})
@avatar.Avatar(avatar.Config{Tone: avatar.ToneInverse, Reactive: true})
@avatar.Avatar(avatar.Config{Tone: avatar.TonePrimary, Reactive: true})
@avatar.Avatar(avatar.Config{Tone: avatar.ToneSecondary, Reactive: true})
@avatar.Avatar(avatar.Config{Tone: avatar.ToneInfo, Reactive: true})
@avatar.Avatar(avatar.Config{Tone: avatar.ToneSuccess, Reactive: true})
@avatar.Avatar(avatar.Config{Tone: avatar.ToneWarning, Reactive: true})
@avatar.Avatar(avatar.Config{Tone: avatar.ToneDanger, Reactive: true})

Avatar with Initials Placeholder

An avatar in various colors with an initials placeholder.

Avatar with Initials Placeholder Rendered example
Avatar with Initials Placeholder 
@avatar.Avatar(avatar.Config{Initials: "JS", Tone: avatar.ToneDefault, Reactive: true})
@avatar.Avatar(avatar.Config{Initials: "JS", Tone: avatar.ToneInverse, Reactive: true})
@avatar.Avatar(avatar.Config{Initials: "JS", Tone: avatar.TonePrimary, Reactive: true})
@avatar.Avatar(avatar.Config{Initials: "JS", Tone: avatar.ToneSecondary, Reactive: true})
@avatar.Avatar(avatar.Config{Initials: "JS", Tone: avatar.ToneInfo, Reactive: true})
@avatar.Avatar(avatar.Config{Initials: "JS", Tone: avatar.ToneSuccess, Reactive: true})
@avatar.Avatar(avatar.Config{Initials: "JS", Tone: avatar.ToneWarning, Reactive: true})
@avatar.Avatar(avatar.Config{Initials: "JS", Tone: avatar.ToneDanger, Reactive: true})

Avatar with Border

An avatar with a border in various colors.

Avatar with Border Rendered example
Info border avatar
Success border avatar
Warning border avatar
Danger border avatar
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 Rendered example
Offline
Info
Online
Away
Busy
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 Rendered example
Aiden Walker
Emily Rodriguez
Alex Martinez
Bob Johnson
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) Rendered example
Loaded
Error
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, Tone: avatar.TonePrimary})

Go API

v0.2.7

The examples above cover behavior and composition. pkg.go.dev is the canonical reference for exported types, functions, methods, and Go documentation.

github.com/araihu/goshtoso/components/avatar
Open v0.2.7 API
Accordion Badge