Skip to content
SMUL

Simple Avatar

Here is a simple guide on how to use the SAvatar component, and it’s different props.

Calling the component

This component accepts differents props of different types, if they are not passed to the component, they will be set to its default values.

<SAvatar
  src="https://www.w3schools.com/howto/img_avatar.png"
  alt="Avatar"
  size="medium"
  name="John"
/>
Avatar

John

Props

Size

The component expects a string as a size for the avatar. This prop is optional and if not passed, the component will set the size to medium.

<SAvatar src="https://www.w3schools.com/howto/img_avatar.png" size="small"/>

Src

The component expects a string as a source for the image. This prop is optional and if not passed, the component will not render any image.

<SAvatar src="https://www.w3schools.com/howto/img_avatar.png"/>

Alt

The component expects a string as an alt for the image. This prop is optional and if not passed, the component will not render any alt.

<SAvatar alt="Avatar"/>
Avatar

Name

The component expects a string as a name for the avatar. This prop is optional and if not passed, the component will not render any name.

<SAvatar name="John" src="https://www.w3schools.com/howto/img_avatar.png"/>

John

Font Color

The component expects a string as a font color for the name. This prop is optional and if not passed, the component will set the font color to white.

<SAvatar fontColor="blue" name="John" src="https://www.w3schools.com/howto/img_avatar.png"/>

John

Font Weight

The component expects a string as a bold for the name. This prop is optional and if not passed, the component will set the font weight to normal.

<SAvatar fontWeight="bold" name="John" src="https://www.w3schools.com/howto/img_avatar.png"/>

John

Uppercase

The component expects a boolean as an uppercase for the name. This prop is optional and if not passed, the component will set the uppercase to false.

<SAvatar uppercase name="John" src="https://www.w3schools.com/howto/img_avatar.png"/>

JOHN

Block

This prop set to true makes the avatar a block element instead of an inline element.

The component expects a boolean as a block for the avatar. This prop is optional and if not passed, the component will set the block to false.

<SAvatar block name="John" src="https://www.w3schools.com/howto/img_avatar.png"/>
<SAvatar block name="John" src="https://www.w3schools.com/howto/img_avatar.png"/>

John

John

Border

The component expects a boolean as a border for the avatar. This prop is optional and if not passed, the component will set the border to false.

<SAvatar border name="John" src="https://www.w3schools.com/howto/img_avatar.png"/>

John

Border Color

The component expects a string as a border color for the avatar. This prop is optional and if not passed, the component will set the border color to white.

<SAvatar borderColor="blue" border name="John" src="https://www.w3schools.com/howto/img_avatar.png"/>

John

Hoverable

The component expects a boolean as a hoverable for the avatar. This prop is optional and if not passed, the component will set the hoverable to false.

<SAvatar hoverable name="John" src="https://www.w3schools.com/howto/img_avatar.png"/>

John

Focusable

The component expects a boolean as a focusable for the avatar. This prop is optional and if not passed, the component will set the focusable to false.

<SAvatar focusable name="John" src="https://www.w3schools.com/howto/img_avatar.png"/>

John

Rounded

The component expects a boolean as a rounded for the avatar. This prop is optional and if not passed, the component will set the rounded to true.

<SAvatar rounded name="John" src="https://www.w3schools.com/howto/img_avatar.png"/>

John