IT Tools

Handy tools for developer

Compare Texts

WebView Playground

ReactJS Playground

Json Web Tokens

Regular Expressions

Image Crop

Color Picker

QR Code

Generate Text

Generate API Response

JSON Formatter

Number Converter

Random Wheel

Ctrl + K

Avatar

Preview

Show code

<Avatar
  name="Jane"
  src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
  size="medium"
  radius="full"
  hideImage={undefined}
  bordered={false}
  randomFallbackColor={false}
  disabled={false}
/>

Docs

Name	Description	Default	Control
src	Avatar image url	-	-
name *	Avatar name	-
size	Size of Avatar	"medium"	small medium large
radius	Border radius of Avatar	"full"	small large full
hideImage	Whether hide avatar image	false	falsetrue
bordered	Whether has border around avatar	false	falsetrue
randomFallbackColor	Whether generate a random background color for avatar is unavailable	false	falsetrue
disabled	Disabled status	false	falsetrue
className	Wrapper class name	-	-
imageClassName	Image class name	-	-
fallbackClassName	Fallback wrapper class name	-	-

IT Tools

Tools

UI Components

Avatar

Preview

Docs