BlogPlaygroundOne

VAvatar API

ads via vuetify

Props
name
type
default
badge
New in v4.0.0
  | boolean
  | (Partial<{
      modelValue: boolean
      style: StyleValue
      location: Anchor | null
      rounded: string | number | boolean
      tile: boolean
      tag: string | JSXComponent
      floating: boolean
      bordered: boolean
      dot: boolean
      inline: boolean
      label: string
      transition:
        | string
        | boolean
        | (TransitionProps & { component?: Component | undefined })
        | null
    }> & {
      icon:
        | string
        | (string | [string, number])[]
        | (new () => any)
        | FunctionalComponent
      class: any
      height: string | number
      maxHeight: string | number
      maxWidth: string | number
      minHeight: string | number
      minWidth: string | number
      width: string | number
      theme: string
      color: string
      $children:
        | VNodeChild
        | { $stable: false | true }
        | (() => VNodeChild)
        | { default: () => VNodeChild; badge: () => VNodeChild }
      'v-slots': {
        default: false | (() => VNodeChild)
        badge: false | (() => VNodeChild)
      }
      'v-slot:default': false | (() => VNodeChild)
      key: PropertyKey
      ref: VNodeRef
      ref_for: false | true
      ref_key: string
      onVnodeBeforeMount: VNodeMountHook | VNodeMountHook[]
      onVnodeMounted: VNodeMountHook | VNodeMountHook[]
      onVnodeBeforeUpdate: VNodeUpdateHook | VNodeUpdateHook[]
      onVnodeUpdated: VNodeUpdateHook | VNodeUpdateHook[]
      onVnodeBeforeUnmount: VNodeMountHook | VNodeMountHook[]
      onVnodeUnmounted: VNodeMountHook | VNodeMountHook[]
      max: string | number
      content: string | number
      dotSize: string | number
      offsetX: string | number
      offsetY: string | number
      textColor: string
      'v-slot:badge': false | (() => VNodeChild)
    })

false

Wraps the avatar in a VBadge. When set to true, displays a dot badge. Accepts an object of VBadge props for further customization.

border
New in v3.7.0
string | number | boolean

false

Applies utility border classes to the component. To use it, you need to omit the border- prefix, (for example use border-sm as border="sm"). Find a list of the built-in border classes on the borders page.

color
string

undefined

Applies specified color to the control - supports utility colors with or without text- prefix (for example success, purple or text-purple) or CSS color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the colors page.

density
'default' | 'comfortable' | 'compact'

'default'

Adjusts the vertical height used by the component.

end
boolean

false

Applies margin at the start of the component.

icon
  | string
  | (string | [string, number])[]
  | (new () => any)
  | FunctionalComponent

undefined

Apply a specific icon using the v-icon component.

image
string

undefined

Apply a specific image using v-img.

rounded
string | number | boolean

undefined

Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page.

size
string | number

'default'

Sets the height and width of the component. Default unit is px. Can also use the following predefined sizes: x-small, small, default, large, and x-large.

start
boolean

false

Applies margin at the end of the component.

tag
string | (new () => any) | FunctionalComponent

'div'

Specify a custom tag used on the root element.

text
New in v3.4.0
string

undefined

Specify content text for the component.

theme
string

undefined

Specify a theme for this component and all of its children.

tile
boolean

false

Removes any applied border-radius from the component.

variant
'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'

'flat'

Applies a distinct style to the component.

Slots
never
never
badge
New in v4.0.0

Slot for custom badge content. When used, the badge dot mode is disabled.

default

The default Vue slot.

SASS Variables
name
default
$avatar-background
rgb(var(--v-theme-surface))
$avatar-border
(
  $avatar-border-color,
  $avatar-border-style,
  $avatar-border-width,
  $avatar-border-thin-width
)
$avatar-border-color
settings.$border-color-root
$avatar-border-radius
map.get(settings.$rounded, 0)
$avatar-border-style
settings.$border-style-root
$avatar-border-thin-width
thin
$avatar-border-width
0
$avatar-color
functions.theme-color('on-surface', var(--v-medium-emphasis-opacity))
$avatar-density
('default': 0, 'comfortable': -1, 'compact': -2)
$avatar-elevation
1
$avatar-height
40px
$avatar-line-height
normal
$avatar-margin-end
8px
$avatar-margin-start
8px
$avatar-plain-opacity
.62
$avatar-rounded-border-radius
variables.$border-radius-root
$avatar-sizes
functions.map-deep-merge(
  (
    'height': $avatar-height,
    'width': $avatar-width
  ),
  $avatar-sizes
)
$avatar-variants
(
  $avatar-background,
  $avatar-color,
  $avatar-elevation,
  $avatar-plain-opacity,
  'v-avatar'
)
$avatar-vertical-align
middle
$avatar-width
40px