Avatar
A versatile avatar component for user profile images and fallback content.
Basic Usage
A
function Icons($$payload, $$props) {
const { icon, class: className } = $$props;
Icon($$payload, { icon, class: className });
}
Sizes
Colors
J
A
R
M
T
E
Radius
Bordered
B
Fallback States
A
function Icons($$payload, $$props) {
const { icon, class: className } = $$props;
Icon($$payload, { icon, class: className });
}
Component API Reference
Props
src?: string- URL of the avatar imagename?: string- Name to display as fallback or for accessibilitycolor?: "default" | "primary" | "secondary" | "success" | "warning" | "danger"- Color variant of the avatarradius?: "r-none" | "r-xs" | "r-sm" | "r-md" | "r-lg" | "r-xl" | "r-full"- Border radius of the avatarsize?: "sm" | "md" | "lg"- Size of the avataricon?: any- Icon component to display as fallbackfallback?: any- Custom fallback contentisBordered?: boolean- Whether to show a border around the avatarisDisabled?: boolean- Whether the avatar is in a disabled stateisFocusable?: boolean- Whether the avatar can receive focusshowFallback?: boolean- Force display of fallback contentclass?: string- Additional CSS classes