Skip to main content

Avatar

The Avatar component is used to display images, icons, or initials in various shapes and sizes. It supports flexible styling options and allows for dynamic content such as text, images, or icons.

Import​

import { Avatar } from "phaselis";
  • Avatar: Main Component import for Avatar

Usage​

Basic Avatar​

import { Avatar } from "phaselis";

const Example = () => {
  return <Avatar size="md" text="AB" />;
};

export default Example;

Avatar with an Image​

import { Avatar } from "phaselis";

const Example = () => {
  return <Avatar size="lg" img="assets/phaselis.png" />;
};

export default Example;

Avatar with an Icon​

import { Avatar } from "phaselis";

const Example = () => {
  return <Avatar size="sm" iconName="User" />;
};

export default Example;

Props​

id​

string

Unique identifier for the avatar.

<Avatar id="user-avatar" size="lg" img="assets/phaselis.png" />

children​

ReactNode

Custom content to render inside the avatar. Overrides text, img, and iconName props.

import { Text } from "react-native";
<Avatar>
  <Text>VIP</Text>
</Avatar>

style​

NameTypeDescription
containerViewStyleStyle for the outer container view.
textTextStyleStyle for the avatar text.
iconTextStyleStyle for the icon of the avatar.
imageViewStyleStyle for the image of the avatar.

Custom styles for the avatar container, text, and icon.

// Object with named styles
<Avatar
  size="md"
  text="AB"
  style={{
    container: { backgroundColor: "#007bff" },
    text: { color: "#fff", fontWeight: "bold" },
  }}
/>

// Direct icon styling
<Avatar
  iconName="User"
  style={{ color: "white", strokeWidth: 2.5 }}
/>

containerStyle​

ViewStyle

Additional style applied directly to the container View.

<Avatar text="JD" containerStyle={{ marginRight: 10 }} />

iconName​

SlotIconName

The name of the Lucide icon to display inside the avatar.

<Avatar iconName="User" size="md" />

text​

string

Text or initials to display inside the avatar.

<Avatar text="JD" size="lg" variation="rounded" />

size​

ComponentSize

Sets the size of the avatar. Default value is md.

<Avatar size="lg" iconName="Umbrella" />

variation​

default | rounded | square

Determines the appearance of the avatar.

  • default: Displays the avatar as a circle (default value).
  • rounded: Displays the avatar with rounded corners.
  • square: Displays the avatar as a square.
<Avatar variation="rounded" text="CD" />

img​

string

URL of the image to display inside the avatar.

<Avatar img="assets/phaselis.png" />