Skeleton

Open in Storybook

Interactive Demo

Loading

Usage

<script setup>
import { Skeleton } from '@yellowcard/b2b-design-system';
</script>

<template>
  <Skeleton />
</template>

API Reference

Props

Prop	Type	Default	Description
width	string | number	'100%'	Width of the skeleton. Numbers are treated as px; strings pass through (e.g., '50%', '2rem').
height	string | number	'1em'	Height of the skeleton. Numbers are treated as px; strings pass through.
borderRadius	string | number	'4px'	Border radius. Numbers are treated as px; strings pass through (use '50%' for circles).
animated	boolean	true	Whether the shimmer animation is enabled.
ariaLabel	string	'Loading'	Accessible label announced by screen readers.