Avatar
An avatar is a visual representation of a user or entity.Default
When the image source is unavailable (for example, when there's a problem displaying the image due to an error), or the source is unspecified, the avatar component will display a default image.
When an avatar is not given any useful context via the name, presence, or status attributes
like in this example, it will be hidden for assistive technologies as it does not convey any
meaningful information.
import React from 'react';
import Avatar from '@atlaskit/avatar';
const AvatarDefaultExample = () => {
return <Avatar />;
};
export default AvatarDefaultExample;Appearance
Circle
Use a circle avatar to represent a person.
import React from 'react';
import Avatar from '@atlaskit/avatar';
const AvatarCircleExample = () => {
return (
<Avatar
appearance="circle"
src="https://pbs.twimg.com/profile_images/803832195970433027/aaoG6PJI_400x400.jpg"
size="large"
name="Scott Farquhar"
/>
);
};
export default AvatarCircleExample;Square
Use square avatars to represent an entity, such as a project, repository or space.
import React from 'react';
import Avatar from '@atlaskit/avatar';
import ExampleImg from '../../examples-util/nucleus.png';
const AvatarSquareExample = () => {
return <Avatar appearance="square" size="medium" src={ExampleImg} name="Nucleus" />;
};
export default AvatarSquareExample;States
Disabled
Set isDisabled to disable an avatar that isn't usable. This sets the avatar image to 40% opacity
using the opacity.disabled token.
Avoid using disabled UI. This can cause accessibility problems, because disabled UI doesn't give enough information to the user about what went wrong and how to proceed, and will not appear in the tab order.
import React from 'react';
import Avatar from '@atlaskit/avatar';
const AvatarDisabledExample = () => {
return (
<Avatar
src="https://pbs.twimg.com/profile_images/803832195970433027/aaoG6PJI_400x400.jpg"
name="Scott Farquhar"
isDisabled
/>
);
};
export default AvatarDisabledExample;Status
Indicates contextual information by showing a small icon on the avatar. Takes precedence over presence.
Approved
import React from 'react';
import Avatar from '@atlaskit/avatar';
const AvatarStatusApprovedExample = () => {
return <Avatar name="John Smith" status="approved" />;
};
export default AvatarStatusApprovedExample;Declined
import React from 'react';
import Avatar from '@atlaskit/avatar';
const AvatarStatusDeclinedExample = () => {
return <Avatar name="John Smith" status="declined" />;
};
export default AvatarStatusDeclinedExample;Locked
import React from 'react';
import Avatar from '@atlaskit/avatar';
const AvatarStatusLockedExample = () => {
return <Avatar name="John Smith" status="locked" />;
};
export default AvatarStatusLockedExample;Presence
Indicates a user's online status by showing a small icon on the avatar.
Busy
import React from 'react';
import Avatar from '@atlaskit/avatar';
const AvatarPresenceBusyExample = () => {
return <Avatar name="John Smith" presence="busy" />;
};
export default AvatarPresenceBusyExample;Focus
import React from 'react';
import Avatar from '@atlaskit/avatar';
const AvatarPresenceFocusExample = () => {
return <Avatar name="John Smith" presence="focus" />;
};
export default AvatarPresenceFocusExample;Offline
import React from 'react';
import Avatar from '@atlaskit/avatar';
const AvatarPresenceOfflineExample = () => {
return <Avatar name="John Smith" presence="offline" />;
};
export default AvatarPresenceOfflineExample;Online
import React from 'react';
import Avatar from '@atlaskit/avatar';
const AvatarPresenceOnlineExample = () => {
return <Avatar name="John Smith" presence="online" />;
};
export default AvatarPresenceOnlineExample;Size
xxlarge
Use xxlarge circle avatars in places where larger avatars are needed. For example, the Atlassian
People Directory. This size isn't used for square avatars.
import React from 'react';
import Avatar from '@atlaskit/avatar';
import ExampleImg from '../../examples-util/nucleus.png';
const AvatarXXLargeExample = () => {
return (
<div>
<Avatar
size="xxlarge"
src="https://pbs.twimg.com/profile_images/803832195970433027/aaoG6PJI_400x400.jpg"
name="Scott Farquhar"
/>
<Avatar size="xxlarge" appearance="square" src={ExampleImg} name="Nucleus" />
</div>
);
};
export default AvatarXXLargeExample;xlarge
Use xlarge circle avatars where they’re needed to display prominently on a page. This size isn't
used for square avatars.
import React from 'react';
import Avatar from '@atlaskit/avatar';
import ExampleImg from '../../examples-util/nucleus.png';
const AvatarXLargeExample = () => {
return (
<div>
<Avatar
size="xlarge"
src="https://pbs.twimg.com/profile_images/803832195970433027/aaoG6PJI_400x400.jpg"
name="Scott Farquhar"
/>
<Avatar size="xlarge" appearance="square" src={ExampleImg} name="Nucleus" />
</div>
);
};
export default AvatarXLargeExample;large
Use large circle avatars to represent people for main page titles, like a user's account settings.
Use large square avatars to represent main entity titles like Jira projects or Confluence spaces.
import React from 'react';
import Avatar from '@atlaskit/avatar';
import ExampleImg from '../../examples-util/nucleus.png';
const AvatarLargeExample = () => {
return (
<div>
<Avatar
size="large"
src="https://pbs.twimg.com/profile_images/803832195970433027/aaoG6PJI_400x400.jpg"
name="Scott Farquhar"
/>
<Avatar size="large" appearance="square" src={ExampleImg} name="Nucleus" />
</div>
);
};
export default AvatarLargeExample;medium
Use medium circle avatars in activity streams or comments. Use medium square avatars in table
views for project listings.
import React from 'react';
import Avatar from '@atlaskit/avatar';
import ExampleImg from '../../examples-util/nucleus.png';
const AvatarMediumExample = () => {
return (
<div>
<Avatar
size="medium"
src="https://pbs.twimg.com/profile_images/803832195970433027/aaoG6PJI_400x400.jpg"
name="Scott Farquhar"
/>
<Avatar size="medium" appearance="square" src={ExampleImg} name="Nucleus" />
</div>
);
};
export default AvatarMediumExample;small
Use small circle avatars in small areas like 40px text fields, and square avatars for use in
things like dropdown menus.
import React from 'react';
import Avatar from '@atlaskit/avatar';
import ExampleImg from '../../examples-util/nucleus.png';
const AvatarSmallExample = () => {
return (
<div>
<Avatar
size="small"
src="https://pbs.twimg.com/profile_images/803832195970433027/aaoG6PJI_400x400.jpg"
name="Scott Farquhar"
/>
<Avatar size="small" appearance="square" src={ExampleImg} name="Nucleus" />
</div>
);
};
export default AvatarSmallExample;xsmall
Use xsmall circle and square avatars for onscreen metadata such as in Jira work items or dropdown
menus.
import React from 'react';
import Avatar from '@atlaskit/avatar';
import ExampleImg from '../../examples-util/nucleus.png';
const AvatarXSmallExample = () => {
return (
<div>
<Avatar
size="xsmall"
src="https://pbs.twimg.com/profile_images/803832195970433027/aaoG6PJI_400x400.jpg"
name="Scott Farquhar"
/>
<Avatar size="xsmall" appearance="square" src={ExampleImg} name="Nucleus" />
</div>
);
};
export default AvatarXSmallExample;Displaying a tooltip
You can display a tooltip with an avatar on focus or hover. The tooltip content should be set to
the same value as the avatar label.
Don't use a tooltip with an avatar unless it is interactive. For more information, see the avatar component accessibilty guidelines.
import React from 'react';
import Avatar from '@atlaskit/avatar';
import Tooltip from '@atlaskit/tooltip';
const AvatarTooltipExample = () => {
const presence = 'online';
const name = 'Mike Cannon-Brookes';
const label = `${name} (${presence})`;
return (
<Tooltip content={label}>
<Avatar
name={name}
src="https://pbs.twimg.com/profile_images/568401563538841600/2eTVtXXO_400x400.jpeg"
size="large"
onClick={console.log}
presence={presence}
/>
</Tooltip>
);
};
export default AvatarTooltipExample;