Leave Yamada UI a star
StarSkeleton is a component that acts as a placeholder until content is loaded.
Description
The visual color appearance of the component.
Type
"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"Description
The color at the animation end.
Type
UIValue<"border" | Color | ({} & string) | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 318 more ... | "yellow.950">Description
The fadeIn duration in seconds. Requires isLoaded toggled to true in order to see the transition.
Type
string | numberDefault
0.4Description
If true, the skeleton will take the width of it's children.
Type
booleanDefault
falseDescription
If true, the skeleton will take the width of it's children.
Deprecated
Use fitContent instead.
Type
booleanDefault
falseDescription
If true, it'll render its children with a nice fade transition.
Deprecated
Use loaded instead.
Type
booleanDefault
falseDescription
If true, it'll render its children with a nice fade transition.
Type
booleanDefault
falseDescription
The size of the Skeleton.
Type
stringDescription
The animation speed in seconds.
Type
string | numberDefault
0.8Description
The color at the animation start.
Type
UIValue<"border" | Color | ({} & string) | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 318 more ... | "yellow.950">Description
The variant of the Skeleton.
Type
stringDescription
The color at the animation end.
Type
UIValue<"border" | Color | ({} & string) | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 318 more ... | "yellow.950">Description
The fadeIn duration in seconds. Requires isLoaded toggled to true in order to see the transition.
Type
string | numberDefault
0.4Description
If true, the skeleton will take the width of it's children.
Type
booleanDefault
falseDescription
If true, the skeleton will take the width of it's children.
Deprecated
Use fitContent instead.
Type
booleanDefault
falseDescription
If true, it'll render its children with a nice fade transition.
Deprecated
Use loaded instead.
Type
booleanDefault
falseDescription
If true, it'll render its children with a nice fade transition.
Type
booleanDefault
falseDescription
The animation speed in seconds.
Type
string | numberDefault
0.8Description
The color at the animation start.
Type
UIValue<"border" | Color | ({} & string) | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 318 more ... | "yellow.950">Description
The color at the animation end.
Type
UIValue<"border" | Color | ({} & string) | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 318 more ... | "yellow.950">Description
The fadeIn duration in seconds. Requires isLoaded toggled to true in order to see the transition.
Type
string | numberDefault
0.4Description
If true, the skeleton will take the width of it's children.
Type
booleanDefault
falseDescription
If true, it'll render its children with a nice fade transition.
Deprecated
Use loaded instead.
Type
booleanDefault
falseDescription
If true, it'll render its children with a nice fade transition.
Type
booleanDefault
falseDescription
The animation speed in seconds.
Type
string | numberDefault
0.8Description
The color at the animation start.
Type
UIValue<"border" | Color | ({} & string) | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 318 more ... | "yellow.950">Description
The CSS height property.
Type
UIValue<number | "px" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | (string & {}) | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-moz-max-content" | ... 68 more ... | "xs">Edit this page on GitHub