Skeleton
Visually indicates content loading
Import
ts
import { Skeleton } from "@kobalte/core/skeleton";// orimport { Root } from "@kobalte/core/skeleton";// or (deprecated)import { Skeleton } from "@kobalte/core";
ts
import { Skeleton } from "@kobalte/core/skeleton";// orimport { Root } from "@kobalte/core/skeleton";// or (deprecated)import { Skeleton } from "@kobalte/core";
Features
- Support for custom width and height.
- Support for circle skeleton.
- Can toggle visiblity and animation properties.
Anatomy
The skeleton consists of:
- Skeleton: The root container for a skeleton.
tsx
<Skeleton />
tsx
<Skeleton />
Example
A UI toolkit for building accessible web apps and design systems with SolidJS.
tsx
import { Skeleton } from "@kobalte/core/skeleton";import "./style.css";function App() {return (<Skeleton class="skeleton" radius={10}><p>A UI toolkit for building accessible web apps and design systems with SolidJS.</p></Skeleton>);}
tsx
import { Skeleton } from "@kobalte/core/skeleton";import "./style.css";function App() {return (<Skeleton class="skeleton" radius={10}><p>A UI toolkit for building accessible web apps and design systems with SolidJS.</p></Skeleton>);}
Usage
Multiple skeletons
Kobalte
A UI toolkit for building accessible web apps and design systems with SolidJS.
tsx
import { Skeleton } from "@kobalte/core/skeleton";import { Image } from "@kobalte/core/image";import "./style.css";function App() {return (<div class="multiple-root"><div class="multiple-profile"><Skeleton class="skeleton" height={50} circle><Image class="multiple-avatar"><Image.Imgclass="image__img"src="https://pbs.twimg.com/profile_images/1509139491671445507/pzWYjlYN_400x400.jpg"alt="Nicole Steeves"/></Image></Skeleton><Skeleton class="skeleton" height={20} radius={10}>Kobalte</Skeleton></div><Skeleton class="skeleton" radius={10}><p>A UI toolkit for building accessible web apps and design systems with SolidJS.</p></Skeleton></div>);}
tsx
import { Skeleton } from "@kobalte/core/skeleton";import { Image } from "@kobalte/core/image";import "./style.css";function App() {return (<div class="multiple-root"><div class="multiple-profile"><Skeleton class="skeleton" height={50} circle><Image class="multiple-avatar"><Image.Imgclass="image__img"src="https://pbs.twimg.com/profile_images/1509139491671445507/pzWYjlYN_400x400.jpg"alt="Nicole Steeves"/></Image></Skeleton><Skeleton class="skeleton" height={20} radius={10}>Kobalte</Skeleton></div><Skeleton class="skeleton" radius={10}><p>A UI toolkit for building accessible web apps and design systems with SolidJS.</p></Skeleton></div>);}
Toggle example
A UI toolkit for building accessible web apps and design systems with SolidJS.
tsx
import { Skeleton } from "@kobalte/core/skeleton";import { ToggleButton } from "@kobalte/core/toggle-button";import "./style.css";function App() {const [visible, setVisible] = createSignal(true);return (<div class="toggle-root"><ToggleButton class="toggle-button" pressed={visible()} onChange={setVisible}>Skeleton {visible() ? "Visible" : "Not Visible"}</ToggleButton><Skeleton class="skeleton" visible={visible()}><p>A UI toolkit for building accessible web apps and design systems with SolidJS.</p></Skeleton></div>);}
tsx
import { Skeleton } from "@kobalte/core/skeleton";import { ToggleButton } from "@kobalte/core/toggle-button";import "./style.css";function App() {const [visible, setVisible] = createSignal(true);return (<div class="toggle-root"><ToggleButton class="toggle-button" pressed={visible()} onChange={setVisible}>Skeleton {visible() ? "Visible" : "Not Visible"}</ToggleButton><Skeleton class="skeleton" visible={visible()}><p>A UI toolkit for building accessible web apps and design systems with SolidJS.</p></Skeleton></div>);}
API Reference
Skeleton
Skeleton
is equivalent to the Root
import from @kobalte/core/skeleton
(and deprecated Skeleton.Root
).
Prop | Description |
---|---|
visible | boolean The visible state of the Skeleton. Sets the data-visible data attribute. |
animate | boolean Whether the skeleton should animate. Sets the data-animate data attribute. |
width | number The width of the skeleton in px. Defaults to 100%. |
height | number The height of the skeleton in px. Defaults to auto. |
radius | number Roundness of the skeleton in px. Sets border-radius. |
circle | boolean Whether the skeleton should be a circle. Sets border-radius and width to the height. |
children | JSX.Element The children of the Skeleton. |
Data attribute | Description |
---|---|
data-visible | Present when the Skeleton is visible. |
data-animate | Present when the Skeleton can animate. |
Rendered elements
Component | Default rendered element |
---|---|
Skeleton | div |