🖼 Components: media

The visual elements: icon, image and badge.

⭐️ Icon

An icon is rendered by name (lucide set, kebab-case: map-pin, check-circle, shopping-bag).

• name — required.
• size — xs … xl, 2xl, 3xl
• color — a color token
• stroke — stroke width, fill — fill color

<Row align="center" gap={2}>
  <Icon name="map-pin" size="sm" color="secondary" />
  <Text value={hotel.location} size="sm" color="secondary" />
</Row>

An unknown name renders an empty box of the same size, so the layout never jumps.

🌄 Image

• src — a URL or a { light, dark } pair.
• alt — text description.
• width, height, size, aspectRatio, radius.
• fit — cover | contain | fill | scale-down | none.
• frame — draws it inside a frame, background — the backdrop.
• onClickAction — makes the image clickable.

<Image src={hotel.image} alt={hotel.name} height={160} radius="lg" fit="cover" />

🏅 Badge

A short status chip.

• label — the text.
• color — primary | secondary | success | danger | warning | info.
• variant — solid | soft | outline.
• size — sm | md | lg, and pill for a rounded shape.

<Badge label={order.status} color="success" variant="soft" pill />

💡 Tips

• Image URLs are external — they must be https and publicly reachable.
• To colour a badge by status, return a ready colour in the data: color={order.statusColor}.