DXUserAvatar

The circular user avatar shown in the dashboard navbar’s user menu: a single initial on a solid disc, with an optional notification dot. It is the default content of DXDashboardNavbar’s user-icon slot.

It exists as its own component because that slot is one consumers decorate (adding an unread badge, wrapping it in a link) rather than replace. The navbar’s styles are scoped, so slot content compiled in the consumer’s scope cannot reuse them — without DXUserAvatar every override starts by re-implementing the avatar’s CSS, which then drifts from the theme. Rendering the same component in the slot keeps an override to one line and on theme.

Live Examples

Default

S

The initial is taken from user.name (Sarah Johnson).

Explicit initial and custom content

SJ

initial overrides the derived letter; the default slot replaces it entirely.

Notification badge

S3 unread notifications

SUnread notifications

SUnread notifications

The dot is a colour-only signal, so badgeLabel carries the meaning for screen readers.

Decorating the navbar user-icon slot

Dashboard

User menu

SUnread notifications

• Notifications
• Settings

Toggle unread

Show Code

Props

Name Click to sort ascending	Type	Required Click to sort ascending	Default	Description
user	{ name: string } | null	No	null	The user whose initial is shown — the first letter of name.
initial	string	No	''	Overrides the initial derived from user.name (e.g. two-letter initials).
badge	boolean	No	false	Show a notification dot on the avatar (e.g. unread updates).
badgeVariant	ColorVariant	No	'danger'	Colour of the notification dot.
badgeLabel	string	No	'Unread notifications'	Screen-reader text for the dot, which is otherwise a colour-only signal. Ignored unless badge is set.

Slots

Name Click to sort ascending	Description	Scoped Props
default	Replaces the initial inside the disc (e.g. a photo or an icon). The disc, and the badge, still render.	-

Decorating the navbar avatar

Render DXUserAvatar in DXDashboardNavbar’s user-icon slot (or DXDashboard’s navbar-user-icon slot) to keep the default avatar and add to it:

<template>
  <DXDashboardNavbar :user="user" page-title="Dashboard">
    <template #user-icon="{ user }">
      <DXUserAvatar :user="user" :badge="hasUnread" badge-label="Unread notifications" />
    </template>
  </DXDashboardNavbar>
</template>

<script setup lang="ts">
import { DXDashboardNavbar, DXUserAvatar } from '@omnitend/dashboard-for-laravel';
</script>

Extended Component

This is a custom component that extends beyond simple Bootstrap Vue Next wrappers, providing additional functionality specific to Laravel dashboards.