Skip to content

Overview

The <x-aura::brand> component renders a clickable brand identity element combining an optional logo image, an application name, or custom slot content. It is designed for use in navbars, sidebars, and page headers where a consistent brand mark is needed.

Use brand for:

  • Navbar brand links
  • Sidebar logo and app name
  • Footer brand identity
  • Login/auth page headers

Basic Usage

My App 
<x-aura::brand logo="/images/logo.svg" name="My App" />

Props

Prop Type Default Description
logo string|null null URL of the logo image. When provided, renders an <img> element
name string|null null Application name displayed next to the logo
href string '/' Link destination URL
size string 'md' Size variant: sm, md, lg

Size dimensions:

  • sm -> logo h-6 w-6, text text-sm
  • md -> logo h-8 w-8, text text-base
  • lg -> logo h-10 w-10, text text-xl

Slots

Slot Description
Default Custom content rendered when neither logo nor name is provided

Variants / Examples

Logo Only

<x-aura::brand logo="/images/logo.svg" href="/" />

Name Only

Aura UI 
<x-aura::brand name="Aura UI" />

Logo and Name

Aura UI 
<x-aura::brand logo="/images/logo.svg" name="Aura UI" size="lg" />

Size Variants

Small Medium Large 
<div class="flex items-center gap-8">
    <x-aura::brand name="Small" size="sm" />
    <x-aura::brand name="Medium" size="md" />
    <x-aura::brand name="Large" size="lg" />
</div>

Custom Slot Content

My App 
<x-aura::brand href="/dashboard">
    <div class="flex items-center gap-2">
        <x-aura::icon name="zap" size="md" class="text-aura-primary-500" />
        <span class="font-bold text-lg">My App</span>
    </div>
</x-aura::brand>
StarApp 
<x-aura::brand href="/">
    <div class="flex items-center gap-2">
        <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-violet-600 text-white">
            <x-aura::icon name="star" size="sm" />
        </div>
        <span class="font-semibold text-base text-gray-900 dark:text-white">StarApp</span>
    </div>
</x-aura::brand>

In a Navbar

<x-aura::navbar>
    <x-slot:brand>
        <x-aura::brand logo="/images/logo.svg" name="Acme" />
    </x-slot:brand>
    {{-- nav items... --}}
</x-aura::navbar>

Accessibility

  • The component renders as an <a> tag, making it keyboard-focusable and navigable.
  • When a logo is provided, the <img> tag includes alt text derived from the name prop.
  • The link applies no-underline styling to keep the brand element visually clean.