Avatar

An Avatar is a graphical representation of user.

📦1.7 KB

Overview

avatar
import { Avatar } from "@camome/core/Avatar";
export default function Default() {
return <Avatar src="/demo/avatar-1.jpg" alt="avatar" />;
}

Size

avataravataravatarAXAXAX
import { Avatar } from "@camome/core/Avatar";
import styles from "./styles.module.scss";
export default function Size() {
return (
<div className={styles.size__container}>
<Avatar size="sm" src="/demo/avatar-2.jpg" alt="avatar" />
<Avatar size="md" src="/demo/avatar-2.jpg" alt="avatar" />
<Avatar size="lg" src="/demo/avatar-2.jpg" alt="avatar" />
<Avatar size="sm" children="AX" />
<Avatar size="md" children="AX" />
<Avatar size="lg" children="AX" />
<Avatar size="sm" alt="avatar" />
<Avatar size="md" alt="avatar" />
<Avatar size="lg" alt="avatar" />
</div>
);
}

Variant

import { Avatar } from "@camome/core/Avatar";
import styles from "./styles.module.scss";
export default function Variant() {
return (
<div className={styles.container}>
<Avatar variant="solid" />
<Avatar variant="soft" />
<Avatar variant="outline" />
<Avatar variant="ghost" />
</div>
);
}

Color schemes

import { Avatar } from "@camome/core/Avatar";
import styles from "./styles.module.scss";
export default function ColorScheme() {
return (
<div className={styles.container}>
<Avatar colorScheme="primary" />
<Avatar colorScheme="neutral" />
<Avatar colorScheme="info" />
<Avatar colorScheme="success" />
<Avatar colorScheme="warn" />
<Avatar colorScheme="danger" />
</div>
);
}

With custom content

avatarMT
import BoltIcon from "@heroicons/react/24/outline/BoltIcon";
import { Avatar } from "@camome/core/Avatar";
import styles from "./styles.module.scss";
export default function Content() {
return (
<div className={styles.container}>
<Avatar src="/demo/avatar-2.jpg" alt="avatar" />
<Avatar>MT</Avatar>
<Avatar>
<BoltIcon />
</Avatar>
<Avatar />
</div>
);
}

As clickable item

import { Avatar } from "@camome/core/Avatar";
import styles from "./styles.module.scss";
export default function ColorScheme() {
return (
<div className={styles.container}>
<Avatar component="a" href="#" aria-label="User profile" />
<Avatar
component="button"
variant="solid"
onClick={() => void alert("You clicked successfully!")}
aria-label="User profile"
/>
</div>
);
}