Blocks

Avatar

A circular image with an optional text fallback, composed from three sub-helpers.

Usage

Compose sui.avatar with sui.avatar_image and/or sui.avatar_fallback inside a block.

sui.avatar do
  sui.avatar_fallback "JD"
end

sui.avatar do
  sui.avatar_image src: "https://i.pravatar.cc/100?img=3", alt: "User"
  sui.avatar_fallback "U"
end

Pass size: to sui.avatar to adjust the circle diameter.

sui.avatar size: :sm do
  sui.avatar_image src: "https://i.pravatar.cc/100?img=3", alt: "User"
  sui.avatar_fallback "U"
end

sui.avatar size: :default do
  sui.avatar_image src: "https://i.pravatar.cc/100?img=3", alt: "User"
  sui.avatar_fallback "U"
end

sui.avatar size: :lg do
  sui.avatar_image src: "https://i.pravatar.cc/100?img=3", alt: "User"
  sui.avatar_fallback "U"
end

Helper	Prop	Type	Default	Description
sui.avatar	size	Symbol	:default	Circle size — `:sm` (24 px), `:default` (32 px), `:lg` (40 px)
sui.avatar_image	src	String	—	Image URL (required)
sui.avatar_image	alt	String	""	Alt text for the image
sui.avatar_fallback	name	String	nil	Initials or text shown when the image is absent or fails to load
all helpers	**opts	Hash	—	Any extra HTML attributes are forwarded to the tag

Next: Button →