@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
68 lines (67 loc) • 2.47 kB
TypeScript
import type { HTMLProps, ReactNode } from 'react';
import type { IconIcon } from '../icon/Icon';
import type { ImgProps } from '../../elements/img/Img';
import type { SpacingProps } from '../../shared/types';
import type { SkeletonShow } from '../skeleton/Skeleton';
import AvatarGroup from './AvatarGroup';
export type AvatarSizes = 'small' | 'medium' | 'large' | 'x-large';
export type AvatarVariants = 'primary' | 'secondary' | 'tertiary';
export type AvatarImgProps = ImgProps;
export type AvatarProps = Omit<HTMLProps<HTMLElement>, 'size'> & {
/**
* Used in combination with `src` to provide an alt attribute for the `img` element.
*/
alt?: string;
/**
* Custom className on the component root
* Default: `null`
*/
className?: string;
/**
* If set to `true`, an overlaying skeleton with animation will be shown.
*/
skeleton?: SkeletonShow;
/**
* Content of the component.
*/
children?: ReactNode;
/**
* Size of the Avatar. Options: `small` | `medium` | `large` | `x-large`. Defaults to `medium`.
*/
size?: AvatarSizes;
/**
* Specifies the path to the image.
*/
src?: string;
/**
* [Image properties](/uilib/elements/image) applied to the `img` element if the component is used to display an image.
*/
imgProps?: ImgProps;
/**
* An icon name or component (will override the `src` property).
*/
icon?: IconIcon;
/**
* Override the variant of the component. Options: `primary` | `secondary` | `tertiary`. Defaults to `primary`.
*/
variant?: AvatarVariants;
/**
* If `aria-hidden` is set to `true` or if a label is given, typically inside a table or dl (definition list), then you can disable Avatar.Group as a dependent of Avatar. Use `true` to omit the `Avatar group required:` warning.
*/
hasLabel?: boolean;
/**
* Define a custom background color, instead of a variant. Use a Eufemia color.
*/
backgroundColor?: string;
/**
* Define a custom color to complement the backgroundColor. Use a Eufemia color.
*/
color?: string;
};
export type AvatarAllProps = AvatarProps & SpacingProps;
declare const Avatar: {
(localProps: AvatarAllProps): import("react/jsx-runtime").JSX.Element;
Group: (localProps: import("./AvatarGroup").AvatarGroupAllProps) => import("react/jsx-runtime").JSX.Element;
};
export { AvatarGroup };
export default Avatar;