Skeleton

BETA

Component demo

Interactive example

Web component

React

<ic-skeletonvariant="circle"></ic-skeleton>
<ic-typographyvariant="caption">
<ic-skeletonvariant="text"></ic-skeleton>
</ic-typography>
<ic-skeleton></ic-skeleton>

<IcSkeletonvariant="circle"/>
<IcTypographyvariant="caption">
<IcSkeletonvariant="text"/>
</IcTypography>
<IcSkeleton/>

Skeleton details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property appearance Attribute appearance	The appearance of the skeleton. type: "light" \| "default" - "default" \| "light"	"default"
Property light Attribute light	This prop should not be used anymore. Set prop `appearance` to "light" instead. Deprecated	false
Property variant Attribute variant	The variant of the skeleton that will be displayed. type: IcSkeletonVariants - "circle" \| "rectangle" \| "text"	"rectangle"

Property

appearance

Attribute

appearance

The appearance of the skeleton.

type: "light" | "default" - "default" | "light"

Default: "default"

Property

light

Attribute

light

This prop should not be used anymore. Set prop `appearance` to "light" instead.

Deprecated

Default: false

Property

variant

Attribute

variant

The variant of the skeleton that will be displayed.

type: IcSkeletonVariants - "circle" | "rectangle" | "text"

Default: "rectangle"

Variants

Inherited size from child

Interactive example

Test text

Web component

React

<ic-skeleton><div class="child">Test text</div></ic-skeleton>

<IcSkeleton>
<divclassName={classes.child}>Test text</div>
</IcSkeleton>

Set width and height

CSS changes directly toSkeleton must be applied with inline styling.

Interactive example

Height and width set with styles

Height set with styles

Width set with styles

Web component

React

<ic-typographyvariant="h4">
<h4>Height and width set with styles</h4>
</ic-typography>
<ic-skeletonstyle="height:12.5rem;width:28.125rem"></ic-skeleton>
<ic-typographyvariant="h4">
<h4>Height set with styles</h4>
</ic-typography>
<ic-skeletonstyle="height:5rem"></ic-skeleton>
<ic-typographyvariant="h4">
<h4>Width set with styles</h4>
</ic-typography>
<ic-skeletonstyle="width:28.125rem"></ic-skeleton>

<IcTypographyvariant="h4">
<h4>Height and width set with styles</h4>
</IcTypography>
<IcSkeleton
style={{
    height:"12.5rem",
    width:"12.5rem",
}}
/>
<IcTypographyvariant="h4">
<h4>Height set with styles</h4>
</IcTypography>
<IcSkeleton
style={{
    height:"5rem",
}}
/>
<IcTypographyvariant="h4">
<h4>Width set with styles</h4>
</IcTypography>
<IcSkeleton
style={{
    width:"28.125rem",
}}
/>

Light

Interactive example

Web component

React

<ic-skeletonvariant="circle"appearance="light"></ic-skeleton>
<ic-typographyvariant="caption">
<ic-skeletonvariant="text"appearance="light"></ic-skeleton>
</ic-typography>
<ic-skeletonappearance="light"></ic-skeleton>

<IcSkeletonvariant="circle"appearance="light"/>
<IcTypographyvariant="caption">
<IcSkeletonvariant="text"appearance="light"/>
</IcTypography>
<IcSkeletonappearance="light"/>

Within IcCard component

Interactive example

Americano Order

Name: Michael

Extras: double espresso shot & oat milk

Web component

React

<ic-cardheading="Americano Order"subheading="Name: Michael">
<ic-skeleton
slot="icon"
variant="circle"
style="height:var(--ic-space-xl);width:var(--ic-space-xl);"
></ic-skeleton>
<ic-skeleton
slot="heading"
variant="rectangle"
style="height:var(--ic-space-xl);width:10.625rem;"
></ic-skeleton>
<ic-skeleton
slot="subheading"
variant="text"
style="height:1.125rem;width:6.25rem;"
></ic-skeleton>
<ic-skeleton
slot="message"
variant="rectangle"
style="height:var(--ic-space-lg);width:18.75rem;"
></ic-skeleton>
<ic-skeleton
slot="interaction-controls"
variant="rectangle"
style="height:2.5rem;width:6.25rem;"
></ic-skeleton>
<ic-skeleton
slot="interaction-controls"
variant="rectangle"
style="height:2.5rem;width:6.25rem;"
></ic-skeleton>
</ic-card>

<IcCardheading="Americano Order"subheading="Name: Michael">
<IcSkeleton
slot="icon"
variant="circle"
style={{
      height:"var(--ic-space-xl)",
      width:"var(--ic-space-xl)",
}}
/>
<IcSkeleton
slot="heading"
variant="rectangle"
style={{
      height:"var(--ic-space-xl)",
      width:"10.625rem",
}}
/>
<IcSkeleton
slot="subheading"
variant="text"
style={{
      height:"1.125rem",
      width:"6.25rem",
}}
/>
<IcSkeleton
slot="message"
variant="rectangle"
style={{
      height:"var(--ic-space-lg)",
      width:"18.75rem",
}}
/>
<IcSkeleton
slot="interaction-controls"
variant="rectangle"
style={{
      height:"2.5rem",
      width:"6.25rem",
}}
/>
<IcSkeleton
slot="interaction-controls"
variant="rectangle"
style={{
      height:"2.5rem",
      width:"6.25rem",
}}
/>
</IcCard>

Last reviewed 31 May 2024 .