Avatar Chip

Displays an avatar chip with image, name, and template label. Supports selection and click handling.

agentavatarchipprofileuserselect

v0.100.1

Promptbook Team

Live Preview

Features

✓Displays avatar image and name
✓Template label support
✓Selectable state
✓Click handler

Usage Examples

Basic Usage

<AvatarChip avatarBasicInformation={avatar} />

Template Avatar

<AvatarChip avatarBasicInformation={avatar} isTemplate />

Selectable

<AvatarChip avatarBasicInformation={avatar} isSelected onSelect={handleSelect} />

From Book

import { book } from '@promptbook/utils';
import { AvatarChipFromSource } from '@promptbook/components';

<AvatarChipFromSource
    source={book`
    
        AI Avatar

        PERSONA A friendly AI assistant that helps you with your tasks

    `}
    isSelected
    onSelect={handleSelect}
/>

Quick Actions

Download Component

Technical Details

Dependencies

react: ^18.0.0 || ^19.0.0

@promptbook/components: 0.100.1

Props

avatarBasicInformation

AgentBasicInformation

Basic information about the avatar (name, image, description)

isTemplate

boolean

Whether this chip is a template avatar

Default: false

className

string

Optional CSS class name for the root element

Default: ""

onSelect

(avatar: AgentBasicInformation) => void

Callback when chip is clicked

isSelected