Avatar

Last update: 2.1.0 (30/01/2024)

The Avatar component builds upon the Image component, appearing as a round image with a custom icon placeholder.

Usage

import { Avatar } from "@valence-ui/core";

function MyComponent() { 
    return ( 
        <Avatar
            src="https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=720&q=80"
            alt="A nice avatar!"
        />
    )
}

Overriding default props

import { Avatar } from "@valence-ui/core";
import { IconUserCircle } from "@tabler/icons-react";

function MyComponent() { 
    return ( 
        <Avatar
            src="https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=720&q=80"
            alt="A nice avatar!"
            
            square={false}
            radius="sm"
            placeholder={<IconUserCircle />}
        />
    )
}

Setting a fill variant

import { Avatar } from "@valence-ui/core";

function MyComponent() { 
    return ( 
        <Avatar
            src="https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=720&q=80"
            alt="A nice avatar!"
            
            variant="filled"     // Defaults to theme default
        />
    )
}

Customizing the placeholder

import { Avatar } from "@valence-ui/core";

function MyComponent() { 
    return ( 
        <Avatar
            src="https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=720&q=80"
            alt="A nice avatar!"
            
            placeholderColor="blue"
        />
    )
}

---

Props

Extends ImageProps.

Property	Type	Description
variant	FillVariant	Defines the fill variant for this avatar. Defaults to theme default.
size	ComponentSize	Defines the size of this avatar. Defaults to theme default.
outline	boolean	Whether to render an outline in the placeholder.
secondaryIcon	ReactNode	An optional secondary icon to display near the avatar.
secondaryIconProps	IconProps	Props to apply to the secondary icon, if it exists.
spanStyle	CSSProperties	Optional styles to pass to the containing span component.

---

Changelog

• 2.1.0:

  • Removed placeholderColor prop; use color instead.

  • Added size, outline, spanStyle, secondaryIcon and secondaryIconProps props.