# Core/SkeletonGroup - Design

### SkeletonGroup.Button

Button-shaped placeholder.

### SkeletonGroup.Input

Input-shaped placeholder.

### SkeletonGroup.Node

Custom content placeholder.

## Preset layouts

SkeletonGroup provides standalone skeleton shapes. Use `Skeleton` for the preset title+paragraph layout.

## Best Practices

**Do**

Do maintain consistent skeleton coloring.

**Don't**

Don't change the color of skeletons.

## Accessibility

### Alternative text

The loading skeleton requires an appropriate accessible role and label.

**Landmark details:**

* **element**: `span` (root container)
* **aria-label**: `"Loading"` (when loading)
* **role**: `status` (live region)
* **aria-busy**: `true` (when loading)

<img className="w-full" src="images/guidelines/skeleton/alternative-text.png" alt="Skeleton with accessibility landmark annotation showing element, aria-label, and role" />

### Color contrast

Graphics and user interface components like skeletons are not required to meet minimum contrast.

### Motion

When `active` is true, the skeleton shows a gradient shimmer animation. The animation is automatically disabled when the user has `prefers-reduced-motion: reduce` set.