Skeleton

bo-skeleton is a loading placeholder with text, circle, and rectangle shapes. It exposes role="status", aria-busy="true", and an accessible loading label by default.

Placeholder Content

<div class="grid gap-3"><bo-skeleton variant="text" width="12rem" height="1rem" /><bo-skeleton variant="rect" width="100%" height="5rem" /></div>

Shapes and Animation

Set animated="false" when a static placeholder is preferred. width and height accept any CSS size string.

<div class="flex items-center gap-4"><bo-skeleton variant="circle" width="3rem" height="3rem" /><bo-skeleton variant="rect" width="8rem" height="3rem" animated="false" /></div>

API Reference

Prop	Type	Default	Description
id / dataTestId	string	Autogenerated	Element id and test id.
variant	'text' | 'circle' | 'rect'	rect	Placeholder shape.
width / height	string	-	CSS dimensions.
animated	boolean	true	Enables the pulse animation.
ariaLabel	string	Loading...	Accessible loading label.
role	HTMLAttributes['role']	status	Element role.