Avatar
An avatar is a visual representation of a user or entity.
Size
Default Size
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from 'react';
import Avatars from '@neoKit/avatar';
const AvatarDefaultHeightExample = () => {
return(<div>
<Avatars size='xxlarge' path={"assets/avatar.svg"} />
<Avatars size='xlarge' path={"assets/avatar.svg"} />
<Avatars size='large' path={"assets/avatar.svg"} />
<Avatars size='medium' path={"assets/avatar.svg"} />
<Avatars size='small' path={"assets/avatar.svg"} />
/>
</div>
);
};
export default AvatarDefaultHeightExample;
Custom Size
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from 'react';
import Avatars from '@neoKit/avatar';
const AvatarCustomHeightExample = () => {
return(<div>
<Avatars width={100} height={100} path={"assets/avatar.svg"} />
<Avatars width={75} height={75} path={"assets/avatar.svg"} />
<Avatars width={50} height={50} path={"assets/avatar.svg"} />
<Avatars width={25} height={25} path={"assets/avatar.svg"} />
<Avatars width={15} height={15} path={"assets/avatar.svg"} />
/>
</div>
);
};
export default AvatarCustomHeightExample;
Status
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React from 'react';
import Avatars from '@neoKit/avatar';
const AvatarStatusExample = () => {
return (
<div>
<Avatars width={75} height={75} path={"assets/avatar.svg"} status='true' position='top right' />
<Avatars width={75} height={75} path={"assets/avatar.svg"} status='true' position='top left' />
<Avatars width={75} height={75} path={"assets/avatar.svg"} status='true' position='bottom left'/>
<Avatars width={75} height={75} path={"assets/avatar.svg"} status='true' position='bottom right' color='red'/>
</div>
);
};
export default AvatarStatusExample;
Status with Image
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react';
import Avatars from '@neoKit/avatar';
const AvatarImageStatusExample = () => {
return (
<div>
<Avatars width={75} height={75} path={"assets/avatar.svg"} status='true' position='top left' />
<Avatars width={75} height={75} path={"assets/avatar.svg"} status='true' position='bottom left' statusImage={"assets/status.svg"}/>
<Avatars width={75} height={75} path={"assets/avatar.svg"} status='true' position='bottom right' />
</div>
);
};
export default AvatarImageStatusExample;