Nuxt UI v4 is officially released!

Components

Avatar

GitHub
Display an image that represents a resource or a group of resources.

Usage

Avatar
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Size

Use the size prop to change the size of the Avatar.

Avatar
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Chip

Use the chip-color, chip-text and chip-position props to display a chip on the Avatar.

Avatar
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Placeholder

If there is an error loading the src of the avatar or src is null / false a background placeholder will be displayed, customizable in ui.avatar.background.

Icon

Use any icon from Iconify by setting the icon prop by using this pattern: i-{collection_name}-{icon_name} or change it globally in ui.avatar.default.icon to display an icon on top of the background.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Alt

Otherwise, a placeholder will be displayed with the initials of the alt prop, customizable in ui.avatar.placeholder.

BC
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Group

To stack avatars as a group, use the AvatarGroup component.

  • To limit the amount of avatars to show, use the max prop. It'll truncate the avatars and show a "+X" label (where X is the remaining avatars)
  • To size all the avatars equally, pass the size prop
  • To adjust the spacing or the ring between avatars, customize with ui.avatarGroup.margin or ui.avatarGroup.ring
+1AvatarAvatar
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Props

as
string | Record<string, any>
"img"
size
AvatarSize
config.default.size
"sm""2xs""xs""md""lg""xl""3xs""2xl""3xl"
ui
{ wrapper?: string; background?: string; rounded?: string; text?: string; placeholder?: string; size?: DeepPartial<{ '3xs': string; '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; '3xl': string; }, any>; chip?: DeepPartial<{ base: string; background: string; position: { 'top-right': string; 'bottom-right': string; 'top-left': string; 'bottom-left': string; }; size: { '3xs': string; '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; '3xl': string; }; }, any>; icon?: DeepPartial<{ base: string; size: { '3xs': string; '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; '3xl': string; }; }, any>; default?: DeepPartial<{ size: string; icon: any; chipColor: any; chipPosition: string; }, any>; } & { [key: string]: any; } & { strategy?: Strategy; }
{}
icon
string
config.default.icon
text
string
null
src
string | boolean
null
alt
string
null
chipColor
AvatarChipColor
config.default.chipColor
"primary""gray""red""orange""amber""yellow""lime""green""emerald""teal""cyan""sky""blue""indigo""violet""purple""fuchsia""pink""rose"
chipPosition
"top-right" | "bottom-right" | "top-left" | "bottom-left"
config.default.chipPosition
chipText
string | number
null
imgClass
string
""
ui
{ wrapper?: string; ring?: string; margin?: string; } & { [key: string]: any; } & { strategy?: Strategy; }
{}
size
AvatarSize
null
"sm""3xs""2xs""xs""md""lg""xl""2xl""3xl"
max
number
null

Config

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Alert

Display an alert element to draw attention.

Badge

Display a short text to represent a status or a category.