Skip to content

Overview

The <x-aura::profile> component displays a user's identity as a compact row with an avatar, name, and optional subtitle. It internally uses the <x-aura::avatar> component, automatically generating initials from the name when no image is provided. When an href is set, the entire profile becomes a navigable link.

Use profile for:

  • Navbar user menus
  • Comment and activity feed authors
  • Sidebar account selectors
  • Team member lists

Basic Usage

JD
Jane Doe Product Designer 
<x-aura::profile name="Jane Doe" subtitle="Product Designer" />

Props

Prop Type Default Description
name string '' User's display name. Also used to generate avatar initials
subtitle string|null null Secondary text (role, email, status) displayed below the name
src string|null null URL for the avatar image. Falls back to initials when null
size string 'md' Size variant: sm, md, lg
href string|null null When set, the profile renders as an <a> link

Size mapping:

  • sm -> avatar sm, name text-sm, subtitle text-xs
  • md -> avatar md, name text-base, subtitle text-xs
  • lg -> avatar lg, name text-lg, subtitle text-sm

Variants / Examples

With Avatar Image

Jane Doe [email protected] 
<x-aura::profile
    name="Jane Doe"
    subtitle="[email protected]"
    src="/images/avatars/jane.jpg"
/>
JS
John Smith View Profile 
<x-aura::profile
    name="John Smith"
    subtitle="View Profile"
    href="/users/john-smith"
/>

Small Size (Navbar)

JD
Jane Doe Admin 
<x-aura::profile name="Jane Doe" subtitle="Admin" size="sm" />

Large Size (Profile Page)

Jane Doe Senior Product Designer at Acme Corp 
<x-aura::profile
    name="Jane Doe"
    subtitle="Senior Product Designer at Acme Corp"
    src="/images/avatars/jane.jpg"
    size="lg"
/>

In a Dropdown Trigger

JD
Jane Doe Account 
<x-aura::dropdown>
    <x-slot:trigger>
        <x-aura::profile name="{{ auth()->user()->name }}" subtitle="Account" size="sm" />
    </x-slot:trigger>

    <x-aura::dropdown.item icon="user" href="/profile">My Profile</x-aura::dropdown.item>
    <x-aura::dropdown.item icon="settings" href="/settings">Settings</x-aura::dropdown.item>
    <x-aura::dropdown.separator />
    <x-aura::dropdown.item icon="lock" variant="danger">Sign Out</x-aura::dropdown.item>
</x-aura::dropdown>

Accessibility

  • When href is provided, the component renders as an <a> tag, making it keyboard-focusable and navigable.
  • Without href, it renders as a <div>, serving as a purely presentational element.
  • The avatar automatically displays initials derived from the name, ensuring identification even without an image.
  • The name and subtitle use truncate to prevent overflow, maintaining layout integrity with long text.