@atlaskit/avatar
Version:
An avatar is a visual representation of a user or entity.
105 lines (104 loc) • 3.73 kB
TypeScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { type ReactNode } from 'react';
import { type AppearanceType, type AvatarClickEventHandler, type Presence, type SizeType, type Status } from './types';
export interface AvatarPropTypes {
/**
* Indicates the shape of the avatar. Most avatars are circular, but square avatars
* can be used for 'container' objects.
*/
appearance?: AppearanceType;
/**
* Used to provide custom content to screen readers.
* Status or presence is not added to the label by default if it passed as nodes.
* If status or presence is passed as a string, the default content format is "John Smith (online)".
*/
label?: string;
/**
* Used to override the default border color around the avatar body.
* Accepts any color argument that the border-color CSS property accepts.
*/
borderColor?: string;
/**
* Supply a custom avatar component instead of the default.
*/
children?: ReactNode;
/**
* Provides a url for avatars being used as a link.
*/
href?: string;
/**
* Change the style to indicate the avatar is disabled.
*/
isDisabled?: boolean;
/**
* Provides alt text for the avatar image.
*/
name?: string;
/**
* Indicates a user's online status by showing a small icon on the avatar.
* Refer to presence values on the presence component.
* Alternatively accepts any React element. For best results, it is recommended to
* use square content with height and width of 100%.
*/
presence?: Presence | Omit<ReactNode, string> | (string & {}) | null;
/**
* Defines the size of the avatar. Default value is `medium`.
*
* This can also be controlled by the `size` property of the
* `AvatarContext` export from this package. If no prop is given when the
* `size` is set via this context, the context's value will be used.
*/
size?: SizeType;
/**
* A url to load an image from (this can also be a base64 encoded image).
*/
src?: string;
/**
* Indicates contextual information by showing a small icon on the avatar.
* Refer to status values on the Status component.
*/
status?: Status | Omit<ReactNode, string> | (string & {}) | null;
/**
* The index of where this avatar is in the group `stack`.
*/
stackIndex?: number;
/**
* Assign specific tabIndex order to the underlying node.
*/
tabIndex?: number;
/**
* Pass target down to the anchor, if href is provided.
*/
target?: '_blank' | '_self' | '_top' | '_parent';
/**
* Handler to be called on click.
*/
onClick?: AvatarClickEventHandler;
/**
* A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
*/
testId?: string;
/**
* Analytics context meta data.
*/
analyticsContext?: Record<string, any>;
/**
* Replace the wrapping element. This accepts the name of a html tag which will
* be used to wrap the element.
*/
as?: keyof JSX.IntrinsicElements | React.ComponentType<React.AllHTMLAttributes<HTMLElement>>;
}
/**
* __Avatar__
*
* An avatar is a visual representation of a user or entity.
*
* - [Examples](https://atlassian.design/components/avatar/examples)
* - [Code](https://atlassian.design/components/avatar/code)
* - [Usage](https://atlassian.design/components/avatar/usage)
*/
declare const Avatar: import("react").ForwardRefExoticComponent<AvatarPropTypes & import("react").RefAttributes<HTMLElement>>;
export default Avatar;