@stratakit/bricks/dist/Avatar.d.ts

Small, modular components for StrataKit

import type { BaseProps } from "@stratakit/foundations/secret-internals";
interface AvatarProps extends Omit<BaseProps<"span">, "children"> {
    /**
     * The size of the avatar.
     * @default "medium"
     */
    size?: "small" | "medium" | "large" | "xlarge";
    /**
     * Initials that gets displayed in the absence of an image.
     */
    initials?: string;
    /**
     * Alternative text describing the avatar, typically the user's or organization's full name.
     *
     * When this prop is passed, the avatar gets rendered as `role="img"` and labelled
     * using the provided text.
     *
     * This prop is not required if the avatar is purely decorative. By default, the avatar
     * will be hidden from the accessibility tree.
     */
    alt?: string;
    /**
     * Image to be displayed. Can be `<img>` or `<svg>` or anything else.
     */
    image?: React.JSX.Element;
}
/**
 * An avatar to represent a user or organization.
 *
 * By default, this component assumes that the avatar is decorative, so it adds `aria-hidden` by default.
 * ```tsx
 * <Avatar initials="JD" />
 * ```
 *
 * If the avatar is semantically meaningful, the `alt` prop can be used to provide alternative text.
 * ```tsx
 * <Avatar initials="JD" alt="John Doe" />
 * ```
 *
 * Image & size examples:
 * ```tsx
 * <Avatar initials="JD" alt="John Doe" size="xlarge" image={<img src="…" alt="">} />
 * <Avatar initials="JD" alt="John Doe" size="small" image={<Icon href="…">} />
 * ```
 */
declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLElement | HTMLSpanElement>>;
export default Avatar;