Laravel Indicator Component

Free · MIT

A badge overlay component for displaying notification dots, counts, or status markers on any element.

A Indicator built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::indicator>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

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

See the full API, props and live examples in the Indicator documentation.

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.

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).