FluxSkeleton

Loading-state placeholder. Use shape=text for paragraph rows (combine with count to stack multiple lines), shape=circle for avatar placeholders, shape=rect for card/image placeholders. Always resolve to real content once data arrives — skeletons are transient.

Extends: Text (a2ui/basic@0.10)

Category: primitive

Props

Name

Type

Required

Default

accessibility

object

no

``

component

'FluxSkeleton'

yes

``

count

integer

no

``

height

string

no

``

id

string

yes

``

shape

'text' | 'circle' | 'rect'

yes

'text'

size

'xs' | 'sm' | 'md' | 'lg' | 'xl'

yes

'md'

width

string

no

``

Examples

Three-line text placeholder.

UI.skeleton(shape="text", size="md", count=3)

Avatar placeholder.

UI.skeleton(shape="circle", size="lg")

Anti-patterns

Avoid: Skeletons are loading states. Leaving one in place permanently confuses users; gate it on is_loading and swap in the real content when ready.

UI.column([UI.skeleton(shape="text")])   # never replaced with real content

Tokens used

  • $color.bg.subtle

  • $motion.duration.slow

  • $motion.easing.emphasized

  • $radius.full

  • $radius.md

  • $radius.sm

  • $space.12

  • $space.2

  • $space.3

  • $space.4

  • $space.5

  • $space.6

  • $space.8

Basic-catalog fallback

  • Component: Text

  • Notes: Basic renderers have no shimmer primitive; the node degrades to an empty Text run. Users will see nothing — plan accordingly.