Skeleton

Animated pulsing placeholders for text lines, avatars, buttons, cards, and complex layout content during async data fetching.

Component Syntax

blade

<x-aura::skeleton variant="text" width="60%" />

1. Async Content Loading State

blade

Status: Loading

<x-aura::card size="2xl" gap="4">

    <x-aura::flex direction="col" align="stretch" gap="4">

        <x-aura::flex align="center" gap="3">

            <x-aura::skeleton variant="avatar" size="md" />

            <x-aura::flex direction="col" align="start" gap="2">

                <x-aura::skeleton variant="text" width="60%" />

                <x-aura::skeleton variant="text" width="40%" />

            </x-aura::flex>

        </x-aura::flex>

        <x-aura::skeleton variant="card" />

    </x-aura::flex>

</x-aura::card>

2. Built In Variant Styles

blade

<x-aura::skeleton variant="text" width="100%" />

<x-aura::skeleton variant="avatar" size="md" />

<x-aura::skeleton variant="button" size="sm" />

<x-aura::skeleton variant="card" />

Component Props

Available properties and configurations for the skeleton component.

Prop	Default	Available Values
variant	text	text avatar circle button badge card
size	md	xs sm md lg xl
width	null	CSS width string (e.g. 100%, 200px)
height	null	CSS height string (e.g. 40px, 120px)

Aura Wire

Component Library

Skeleton

Component Syntax

1. Async Content Loading State

2. Built In Variant Styles

Component Props

Progress

Empty

Aura Wire