The AButtonAvatarDropdown component is an atom that displays a button with an avatar and a trailing chevron-down icon, typically used as a dropdown menu trigger.
Props
src
string
default:"/media/img/ui-user-unknown.png"
The source path or URL of the avatar image
The size of the button container
The size of the avatar image within the button
Events
Emitted when the button is clicked
Slots
Optional default slot for custom content displayed alongside the avatar
Usage
Basic Usage
<template>
<AButtonAvatarDropdown
src="/images/user-avatar.jpg"
@on-click="handleClick"
/>
</template>
<script setup>
function handleClick() {
console.log('Dropdown button clicked')
}
</script>
With Custom Sizes
<template>
<AButtonAvatarDropdown
src="/images/user-avatar.jpg"
button-size="lg"
avatar-size="md"
/>
</template>
With Slot Content
<template>
<AButtonAvatarDropdown src="/images/user-avatar.jpg">
John Doe
</AButtonAvatarDropdown>
</template>
Used with Dropdown
<template>
<BDropdownAvatar
:items="menuItems"
user-name="John Doe"
user-email="[email protected]"
>
<AButtonAvatarDropdown src="/images/user-avatar.jpg" />
</BDropdownAvatar>
</template>
<script setup>
const menuItems = [
[
{ label: 'Profile', icon: 'i-lucide-user' },
{ label: 'Settings', icon: 'i-lucide-settings' }
],
[
{ label: 'Logout', icon: 'i-lucide-log-out' }
]
]
</script>
Type Exports
The component exports the following types:
export type ButtonSize = InstanceType<typeof UButton>['$props']['size']
export type AvatarSize = InstanceType<typeof UAvatar>['$props']['size']
Styling
The button is rendered with:
- Color:
primary
- Variant:
ghost
- Shape: Rounded full (circular)
- Trailing icon:
i-lucide-chevron-down
Notes
The component includes commented-out code showing an alternative implementation approach. The current implementation uses Nuxt UI’s UButton component with avatar props.
Source: /home/daytona/workspace/source/app/components/a/button/a-button-avatar-dropdown.vue:62