Display and feedback

Skeleton

Slowly pulsing placeholder for text, media, and circular content.

Live example

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { Skeleton } from "@cofob/design-system-react";

/**
 * Complete Skeleton parameter reference.
 * @param variant
 *   type: component-specific string union
 *   default: "rectangle"
 *   example: "secondary"
 * @param width
 *   type: CSS length
 *   default: —
 *   example: {width}
 * @param height
 *   type: CSS length
 *   default: —
 *   example: {height}
 * @param span attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function SkeletonExample() {
  return (
    <Skeleton width="100%" height="4rem" />
  );
}

Svelte

<script lang="ts">
  import { Skeleton } from "@cofob/design-system-svelte";

  // Complete Skeleton parameter reference.
  // variant
  //   type: component-specific string union
  //   default: "rectangle"
  //   example: "secondary"
  // width
  //   type: CSS length
  //   default: —
  //   example: {width}
  // height
  //   type: CSS length
  //   default: —
  //   example: {height}
  // span attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<Skeleton width="100%" height="4rem" />

HTML

<!--
  Complete Skeleton parameter reference.
  variant
    type: component-specific string union
    default: "rectangle"
    example: "secondary"
  width
    type: CSS length
    default: —
    example: {width}
  height
    type: CSS length
    default: —
    example: {height}
  span attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<span class="cf-skeleton" aria-hidden="true"></span>

Contract

CSS selector	`.cf-skeleton`
Adapters	Native · React · Svelte
Primary props	variant · width · height · span attributes
Documented states	text · rectangle · circle · reduced motion
Interaction	Static and SSR-safe
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`variant`	`component-specific string union`	`"rectangle"`	React · Svelte · HTML	`"secondary"`	Selects the component's visual treatment.
`width`	`CSS length`	`—`	React · Svelte · HTML	`{width}`	Sets an explicit placeholder width.
`height`	`CSS length`	`—`	React · Svelte · HTML	`{height}`	Sets an explicit placeholder height.
`span attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.