Feedback & indicatorsAvatar

Avatar

Avatars are used to show a thumbnail representation of an individual or business in the interface.

Prop	Type	Required	Default	Description
`css`	`never`	—	—	Does not support css.
`disabled`deprecated	`boolean`	—	—	—
`guest`	`boolean`	—	—	Signal to the user that this avatar is less significant e.g "guest user"
`inactive`	`boolean`	—	—	Signal to the user that this avatar is in some way not available.
`name`	`string`	Yes	—	The name of the person represented by the avatar.
`size`	`AvatarSizeType`	—	`medium`	The size of the avatar. Prefer a token; pass exact dimensions only for a design the scale has no size for.

Prop	Type	Required	Default	Description
`css`	`never`	—	—	Does not support css.
`disabled`deprecated	`boolean`	—	—	—
`guest`	`boolean`	—	—	Signal to the user that this avatar is less significant e.g "guest organisation"
`inactive`	`boolean`	—	—	Signal to the user that this avatar is in some way not available.
`name`	`string`	Yes	—	The name of the entity, note that only the first letter will be rendered.
`size`	`AvatarSizeType`	—	`medium`	The size of the entity. Prefer a token; pass exact dimensions only for a design the scale has no size for.
`type`	`Organisation`\|`Person`	Yes	—	Define the type of entity this avatar represents.

Prop	Type	Required	Default	Description
`color`	`string`	—	—	The color of the instance.
`css`	`never`	—	—	Does not support css.
`disabled`deprecated	`boolean`	—	—	—
`guest`	`boolean`	—	—	Signal to the user that this avatar is less significant
`icon`	`ComponentType<IconProps>`	—	—	The icon to place in the instance
`inactive`	`boolean`	—	—	Signal to the user that this avatar is in some way not available.
`name`	`string`	—	—	The name of the instance, note that only the first letter will be rendered.
`size`	`SizeType` `xsmall`\|`small`\|`medium`\|`large`\|`xlarge`	—	`medium`	The size of the instance. Tokens only: the icon inside is sized from this, and the icon scale has no equivalent for an arbitrary box.

Avatar — Guidelines

What each avatar variant is for and when to use it.

Badge

Use badges to highlight an item's status for quick recognition.