mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-17 05:28:09 +01:00
102 lines
1.6 KiB
Markdown
102 lines
1.6 KiB
Markdown
---
|
|
description: An image element with fallback.
|
|
links:
|
|
- label: Avatar
|
|
icon: i-custom-radix-vue
|
|
to: https://www.radix-vue.com/components/avatar.html
|
|
- label: GitHub
|
|
icon: i-simple-icons-github
|
|
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Avatar.vue
|
|
---
|
|
|
|
## Usage
|
|
|
|
### Src
|
|
|
|
Use the `src` prop to set the image URL. You can pass any property from HTML `<img>` element such as `alt`, `loading`, etc.
|
|
|
|
::component-code
|
|
---
|
|
props:
|
|
src: 'https://github.com/benjamincanac.png'
|
|
---
|
|
::
|
|
|
|
### Size
|
|
|
|
Use the `size` prop to set the size of the Avatar.
|
|
|
|
::component-code
|
|
---
|
|
ignore:
|
|
- src
|
|
props:
|
|
src: 'https://github.com/benjamincanac.png'
|
|
size: xl
|
|
---
|
|
::
|
|
|
|
### Icon
|
|
|
|
Use the `icon` prop to display a fallback [Icon](/components/icon).
|
|
|
|
::component-code
|
|
---
|
|
props:
|
|
icon: 'i-heroicons-photo'
|
|
size: md
|
|
---
|
|
::
|
|
|
|
### Text
|
|
|
|
Use the `text` prop to display a fallback text.
|
|
|
|
::component-code
|
|
---
|
|
props:
|
|
text: '+1'
|
|
size: md
|
|
---
|
|
::
|
|
|
|
### Alt
|
|
|
|
When no icon or text is provided, the **initials** of the `alt` prop is used as fallback.
|
|
|
|
::component-code
|
|
---
|
|
props:
|
|
alt: 'Benjamin Canac'
|
|
size: md
|
|
---
|
|
::
|
|
|
|
::note
|
|
The `alt` prop is passed to the `img` element as the `alt` attribute.
|
|
::
|
|
|
|
## Examples
|
|
|
|
### With tooltip
|
|
|
|
You can use a [Tooltip](/components/tooltip) component to display a tooltip when hovering the Avatar.
|
|
|
|
:component-example{name="avatar-tooltip-example"}
|
|
|
|
### With chip
|
|
|
|
You can use a [Chip](/components/chip) component to display a chip around the Avatar.
|
|
|
|
:component-example{name="avatar-chip-example"}
|
|
|
|
## API
|
|
|
|
### Props
|
|
|
|
:component-props
|
|
|
|
## Theme
|
|
|
|
:component-theme
|