Media and loading states

Use optimized images, fallbacks, aspect ratios, avatars, code, progress, spinners, and skeletons predictably.

Image optimization, sizing, and fallbacks

Image defaults src=null, alt to an empty string, and objectFit=cover.
A present src is rendered through the Tavo.js Core Image optimizer. SVG URLs and SVG data URLs default to unoptimized unless unoptimized is supplied explicitly.
Numeric width and height are passed to the image element. String dimensions become inline CSS values.
When both width and height exist, Image reserves a frame. A numeric pair also creates an aspect ratio to reduce layout shift.
When src is missing, skeleton takes precedence, then fallback. Without either, an empty image element is rendered.
sx applies to the frame when dimensions reserve space and to the image otherwise.

TSX

tsximport { Image } from "@tavojs/ui";

<Image
  src="/dashboard.png"
  alt="Project dashboard with delivery metrics"
  width={1280}
  height={720}
  widths={[640, 960, 1280]}
/>

<Image src={null} alt="" width="100%" height={240} skeleton="rounded" />

Content component defaults

Avatar defaults src=null, alt to an empty string, and size=md. It falls back to initials, then string children.
AspectRatio defaults ratio to 16/9. Invalid, non-finite, or non-positive ratios fall back to that value.
Skeleton defaults width=100%, height=1rem, and variant=text.
Progress defaults value=0, max=100, tone=primary, size=md, and showValue=false. Values are clamped for visual width and ARIA output.
StatusDot defaults tone=neutral, size=md, and pulse=false. Supply label when status is not already present as nearby text.

Code and loading behavior

CodeBlock defaults editorTheme=auto, highlighted=true, and wrap=false.
Syntax highlighting is lightweight token classification rather than a full language parser. Very large or uncommon source can be rendered without highlighting.
Spinner communicates active loading. Skeleton reserves visual space. Progress communicates a known amount. Choose the component that matches what the application actually knows.
Loading placeholders still need a nearby accessible name or status when the wait is meaningful to assistive technology.