The Avatar component displays user profile images, initials, or icons in a circular container. It’s commonly used to represent users, contacts, or entities in your application.
import { Avatar } from '@naturacosmeticos/natds-web';
Basic Avatar with Image
import { Avatar } from '@naturacosmeticos/natds-web';
function Example() {
return (
<Avatar
alt="User profile"
src="https://example.com/profile.jpg"
size="standard"
/>
);
}
Avatar with Letter
import { Avatar } from '@naturacosmeticos/natds-web';
function Example() {
return (
<Avatar color="primary" size="huge">
T
</Avatar>
);
}
Anonymous Avatar with Icon
When no image or letter is provided, a default person icon is displayed:
import { Avatar } from '@naturacosmeticos/natds-web';
function Example() {
return (
<Avatar color="primary" size="huge" />
);
}
import { Avatar } from '@naturacosmeticos/natds-web';
function SizeExamples() {
const src = "https://example.com/profile.jpg";
return (
<>
<Avatar src={src} size="tiny" alt="Tiny avatar" />
<Avatar src={src} size="small" alt="Small avatar" />
<Avatar src={src} size="standard" alt="Standard avatar" />
<Avatar src={src} size="large" alt="Large avatar" />
<Avatar src={src} size="huge" alt="Huge avatar" />
</>
);
}
tiny, small, standard, large, huge
Avatar supports theme colors that affect the background when displaying letters or icons:
import { Avatar } from '@naturacosmeticos/natds-web';
function ColorExamples() {
return (
<>
<Avatar color="primary">P</Avatar>
<Avatar color="secondary">S</Avatar>
<Avatar color="default">D</Avatar>
</>
);
}
primary, secondary, default
IAvatarProps
color
'primary' | 'secondary' | 'default' | string
default:"default"
The color of the Avatar, using tokens from the current theme.
size
'tiny' | 'small' | 'standard' | 'large' | 'huge'
default:"standard"
The size of the Avatar.
The image source URL for the avatar.
Alternative text for the avatar image.
The content to display inside the avatar (typically a letter or custom icon).
variant
'circle' | 'rounded' | 'square'
deprecated
Deprecated: The shape of the avatar. This property is deprecated since 0.19.0 and will be removed in 1.0. All avatars will be circle by default.
Advanced Usage
For more advanced use cases and additional props, refer to the Material-UI Avatar documentation. 
