Skip to content

Overview

The <x-aura::indicator> component renders a small badge positioned over its child content. Use it to show notification counts, status dots, or attention markers on icons, avatars, buttons, or any element. It supports positioning, color variants, sizes, an optional ping animation, and a text label.

Basic Usage

JD 
<x-aura::indicator color="danger">
    <x-aura::avatar name="John Doe" />
</x-aura::indicator>

Props

Prop Type Default Description
position string 'top-right' Badge position: top-right, top-left, bottom-right, bottom-left.
color string 'danger' Color variant: danger, primary, success, warning, info, secondary.
size string 'md' Indicator size: sm, md, lg.
ping bool false Enable a pulsing ping animation on the indicator.
label string|null null Text content inside the indicator (e.g., a count).

Variants / Examples

Notification Dot

AL 
<x-aura::indicator color="danger" size="sm">
    <x-aura::icon name="bell" class="w-6 h-6" />
</x-aura::indicator>

<x-aura::indicator color="success" size="sm">
    <x-aura::avatar name="Alice" size="sm" />
</x-aura::indicator>

With Count Label

3
12
99+ 
<x-aura::indicator color="danger" label="3">
    <x-aura::icon name="bell" class="w-6 h-6" />
</x-aura::indicator>

<x-aura::indicator color="primary" label="12">
    <x-aura::icon name="mail" class="w-6 h-6" />
</x-aura::indicator>

<x-aura::indicator color="success" label="99+">
    <x-aura::icon name="message-circle" class="w-6 h-6" />
</x-aura::indicator>

Ping Animation

The ping animation creates a pulsating glow effect that draws attention to the indicator, ideal for real-time notifications.

Notifications

BO

Online status

3

Unread mail

<x-aura::indicator color="danger" :ping="true" size="md">
    <x-aura::icon name="bell" class="w-8 h-8" />
</x-aura::indicator>

<x-aura::indicator color="success" :ping="true" size="md">
    <x-aura::avatar name="Bob" size="md" />
</x-aura::indicator>

<x-aura::indicator color="primary" :ping="true" size="md" label="3">
    <x-aura::icon name="mail" class="w-8 h-8" />
</x-aura::indicator>

Position Variants

TR
1
TL
2
BR
3
BL
4 
<x-aura::indicator color="danger" position="top-right" label="1">...</x-aura::indicator>
<x-aura::indicator color="primary" position="top-left" label="2">...</x-aura::indicator>
<x-aura::indicator color="success" position="bottom-right" label="3">...</x-aura::indicator>
<x-aura::indicator color="warning" position="bottom-left" label="4">...</x-aura::indicator>

Accessibility

  • The indicator uses aria-label to describe the badge content (e.g., "3 notifications") for screen readers.
  • When used as a pure dot without a label, it is marked as aria-hidden="true" since it is decorative.
  • The ping animation is purely visual and does not convey information alone.