Avatar

View Original

An avatar is a visual representation of a user or entity, typically displayed as a profile picture or initials.

Goshtoso Component

Go + Templ

Image Avatars

Initials Avatars

Icon Placeholders

Status Indicators

Sizes

E2E Test Fixtures

Square Shape

Usage Example

// Image Avatar
@avatar.Avatar(avatar.Config{
    Src: "https://example.com/avatar.jpg",
    Alt: "John Doe",
    Size: avatar.SizeMD,
})

// Initials Avatar
@avatar.Avatar(avatar.Config{
    Initials: "JS",
    Variant:  avatar.Primary,
    Size:     avatar.SizeLG,
})

// With Status Indicator
@avatar.Avatar(avatar.Config{
    Src:    "https://example.com/avatar.jpg",
    Status: avatar.StatusSuccess,
    Size:   avatar.SizeMD,
})

// With Border
@avatar.Avatar(avatar.Config{
    Src:         "https://example.com/avatar.jpg",
    Border:      true,
    BorderColor: "border-primary",
    Size:        avatar.SizeMD,
})

// Square Avatar
@avatar.Avatar(avatar.Config{
    Initials: "AB",
    Shape:    avatar.ShapeSquare,
    Variant:  avatar.Info,
    Size:     avatar.SizeMD,
})

// Different Sizes
@avatar.Avatar(avatar.Config{Initials: "XS", Size: avatar.SizeXS})
@avatar.Avatar(avatar.Config{Initials: "SM", Size: avatar.SizeSM})
@avatar.Avatar(avatar.Config{Initials: "MD", Size: avatar.SizeMD})
@avatar.Avatar(avatar.Config{Initials: "LG", Size: avatar.SizeLG})
@avatar.Avatar(avatar.Config{Initials: "XL", Size: avatar.SizeXL})

Accordion Badge