hansui

Appearance

Avatar ​

Displays a user's profile image or icon, often used in social or identity components.

John Doe

Features ​

  • Full keyboard navigation
  • Can expand one or multiple items

Anatomy ​

  • Root: The root container for the avatar

Usage ​

To create an avatar, you can use the New function as shown in the example at the top of this page, or alternatively, you can follow the Builder or Functional patterns. Be sure to follow the anatomy defined above.

New function

templ
@avatar.New(&avatar.Props{
    ImgSrc: "https://avatars.githubusercontent.com/u/13519?v=4",
    Alt:    "John Doe",
})
Builder pattern

The Builder pattern creates an instance using method chaining. The With methods, such as WithColor or WithBorderStyle, are chainable configuration functions that allow you to customize various properties of the component:

templ
@avatar.Builder().WithAlt("Lisa White").WithBorder(true).Render()
Functional pattern

The Functional pattern applies configurations through individual function calls before rendering the button. Like in the Builder pattern, With methods customize the component by setting specific properties:

templ
@avatar.Render(avatar.WithAlt("Mark Brown"), avatar.WithBorder(true))

API Reference ​

avatar.Props ​

Below is a list of each struct field, along with its type, default value, and allowed values where applicable.

ImgSrc ​

The source URL for the avatar image.

  • mandatory: true
  • type: string

Alt ​

The alt text for the avatar image, providing an accessible description.

  • type: string

Variant ​

Defines the style variant of the avatar component. Allows customization of the appearance.

  • type: string
  • default: grouped
  • values: grouped, isolated, lifted, stacked, cyberpunk, brutalist, retro.

Size ​

Specifies the size of the avatar.

  • type: string
  • default: md
  • values: sm, md, lg

Shape ​

Defines the shape of the avatar. Options might include circle, square, etc.

  • type: string
  • default: circle
  • values: box, rounded, circle

Rounded ​

If true, the avatar will have rounded corners.

  • type: bool
  • default: false

Border ​

If true, a border will be applied to the avatar.

  • default: false

Attrs ​

Additional HTML attributes for the accordion element. Allows you to set custom attributes such as data attributes, ARIA roles or others.

  • type: templ.Attributes