UNPKG

1.2 kBTypeScriptView Raw
1import * as React from "react";
2import { BoxProps } from "../Box";
3import { Omit } from "../common-types";
4
5type Size = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
6
7export interface IAvatar {
8 /**
9 * The name of the person in the avatar.
10 *
11 * - if `src` has loaded, the name will be used as the `alt` attribute of the `img`
12 * - If `src` is not loaded, the name will be used to create the initials
13 */
14 name?: string;
15 /**
16 * The size of the avatar.
17 */
18 size?: Size;
19 /**
20 * If `true`, the `Avatar` will show a border around it.
21 *
22 * Best for a group of avatars
23 */
24 showBorder?: boolean;
25 /**
26 * The badge at the bottom right corner of the avatar.
27 */
28 children?: React.ReactNode;
29 /**
30 * The image url of the `Avatar`
31 */
32 src?: string;
33}
34
35export type AvatarNameProps = IAvatar["name"] & BoxProps;
36export const AvatarName: React.FC<AvatarNameProps>;
37
38export const AvatarBadge: React.FC<BoxProps>;
39
40export type AvatarProps = IAvatar & Omit<BoxProps, "size">;
41/**
42 * The Avatar component is used to represent user, and displays the profile
43 * picture, initials or fallback icon.
44 */
45declare const Avatar: React.FC<AvatarProps>;
46
47export default Avatar;