claritykit-svelte
Version:
A comprehensive Svelte component library focused on accessibility, ADHD-optimized design, developer experience, and full SSR compatibility
30 lines • 1.2 kB
TypeScript
type $$ComponentProps = {
src?: string;
alt?: string;
initials?: string;
name?: string;
variant?: 'circle' | 'square' | 'rounded';
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
status?: 'online' | 'offline' | 'away' | 'busy';
class?: string;
};
/**
* Avatar
*
* Avatar component for displaying user or entity images with fallback to initials.
* Supports different sizes, shapes, and status indicators.
* SSR-compatible with safe image loading and DOM access.
*
* @prop {string} [src] - Image source URL
* @prop {string} [alt] - Alternative text for the image
* @prop {string} [initials] - Fallback initials when image fails to load
* @prop {string} [name] - Full name for generating initials automatically
* @prop {string} [variant='circle'] - Avatar shape (circle, square, rounded)
* @prop {string} [size='md'] - Avatar size (xs, sm, md, lg, xl)
* @prop {string} [status] - Status indicator (online, offline, away, busy)
* @prop {string} [className] - Additional CSS classes
*/
declare const Avatar: import("svelte").Component<$$ComponentProps, {}, "">;
type Avatar = ReturnType<typeof Avatar>;
export default Avatar;
//# sourceMappingURL=Avatar.svelte.d.ts.map