Image Block
The Image block displays a single picture sourced from a URL or an uploaded file (SVG, PNG, JPG, JPEG). Control how it fills its box with Image Fitting, give it Alt Text, add a hover Tooltip, fall back to a custom layout when the picture fails, and open it full-screen via a method.
Image — Content Properties
| Property | Type | Default | Appears When | Description |
| data.type | "URL" | "UPLOAD" | URL | Always | Where the picture comes from |
| data.src | string (bindable) | placeholder gradient | data.type = URL | The image web address. Supports expressions and bindings |
| data.uploadDetails | uploaded file (max 1) | — | data.type = Upload | SVG, PNG, JPG, or JPEG only |
| data.alt | string (translatable) | — | Always | Alt text for accessibility and load failures |
| slots.fallback | block slot | empty | Always | Custom layout shown when the image fails to load |
| addOns.tooltip.text | string | — | Always | Tooltip text shown on hover. Tooltip only renders when this has a value |
| addOns.tooltip.placement | placement | top | tooltip.text set | Where the tooltip opens |
| interactions | event list | — | Always | On Click event handler |
| permissions | permission rules | — | Always | Restrict who sees the block |
Image Fitting Options
| Label | CSS Value | Behavior |
| Fill & Crop (default) | object-cover | Fills the box, cropping overflow. Default for new blocks |
| Scale but Preserve Image | object-contain | Scales to fit fully inside; may leave empty space |
| Stretch to Fill | object-fill | Stretches to fill exactly, distorting proportions |
| Original Size | object-none | Keeps native pixel size; crops if larger than box |
| Smart Fit | object-scale-down | Uses whichever of contain or original is smaller |
Image Methods
| Method | Description | Platform |
| Open In Media Viewer | Opens the current image full-screen in a zoomable viewer with a close button | Web only |
Image — Exposed State
| Binding | Type | Description |
{{ id.content.data.src }} | string | The configured image URL (after bindings resolve) |
{{ id.content.data.alt }} | string | The configured alt text |
{{ id.appearance.objectFit }} | string | The active fitting mode |
{{ id.state.isOpenInMediaViewer }} | boolean | Whether the full-screen media viewer is currently open |
Image Behaviors & Gotchas
Note: Broken image shows your fallback slot, or a built-in placeholder: When the picture fails to load, the block swaps in the Fallback slot. If empty, a built-in gradient placeholder appears — not a broken-image icon.
Note: Fill & Crop crops by default: New blocks default to object-cover, which fills the box and cuts off overflow. Switch to "Scale but Preserve Image" to show the whole picture.
Warning: Full-screen viewing is opt-in and web-only: To get lightbox behavior, add an On Click interaction that runs this block's Open In Media Viewer method. On mobile, this method does nothing.
Note: Uploads capped at one image and four file types: SVG, PNG, JPG, JPEG only. Drop a second file and it replaces the first.
Avatar Block
The Avatar block shows a circular representation of a person or entity in three display modes: derived Initials, an Icon, or an Image (URL or uploaded). Two add-ons extend it: a Label (name + caption beside the circle) and a Badge (a status dot or text pinned to the circle). New blocks arrive pre-bound to the signed-in user.
Avatar — Content Properties
| Property | Type | Default | Description |
| type | "initials" | "icon" | "image" | initials | What the circle displays |
| icon | icon | — | Icon shown inside the circle. Appears when type = icon |
| data.src / data.uploadDetails | URL string or uploaded file | — | Image source. Appears when type = image |
| fallbackText | string (bindable, translatable) | signed-in user's username | Full name for generating initials. Also the fallback when an image fails |
| initialsType | "single" | "double" | single | How many letters the initials show |
| addOns.label | label + caption, position, alignment, typography | enabled on new blocks | Name and caption text beside the circle, with position (left/right/top/bottom) and alignment controls |
| addOns.badge | size (sm/md/lg), color (error/success/warning/info), type (Text | Dot) | — | Status badge pinned to the circle. Text type shows a text value; Dot shows a colored dot |
Avatar Group Block
The Avatar Group block renders a row of overlapping avatars representing several people — use it instead of multiple individual Avatar blocks when showing a team or assignee list. Key differences from the single Avatar block:
Accepts an array of avatar objects (each with name, image URL, and optional badge)
Controls the overlap amount via a spacing/overlap setting
Shows a "+N more" indicator when the list exceeds a maximum count
Each avatar in the group inherits the block's size setting
Icon Block
The Icon block renders a small vector glyph from the icon set. Use it for decorative UI symbols — arrows, check marks, status indicators — rather than photographs or complex images. It supports size, color, and an On Click interaction.
Icon — Key Properties
| Property | Type | Description |
| icon | icon name (conditional) | The icon to display. Supports conditional values so the icon can change based on state |
| size | xs | sm | md | lg | xl | The icon's rendered size |
| color | theme color token or custom | The icon's fill/stroke color |
| interactions | event list | On Click handler (web + desktop only) |
| visibility | conditions | Show/hide the block |
| permissions | permission rule | Restrict who sees the block |
Icon Button Block
The Icon Button block is a clickable icon-only button — an Icon with button affordances (hover state, keyboard activation, click event, disabled state, tooltip). Use when you want an icon that triggers an action but has no visible text label.
Icon Button — Key Properties
| Property | Type | Description |
| icon | icon name (conditional) | The icon to display |
| variant | solid | outlined | ghost | soft | plain | The button's visual style |
| color | brand | neutral | danger | success | warning | The button's color scheme |
| size | xs | sm | md | lg | xl | The button's size |
| disabled | condition | Disables the button — no click event fires when disabled |
| tooltip | string | Tooltip text shown on hover (important for accessibility with icon-only buttons) |
| interactions | event list | On Click event handler |
| loading | boolean | condition | Shows a loading spinner in place of the icon while true |
| permissions | permission rule | Restrict who sees the button |
Note: Always set a Tooltip for icon-only buttons: Without visible text, a tooltip is the only way assistive technology and unfamiliar users can understand what the button does.
Which Block to Use
| You want to… | Use |
| Display a single photo, banner, or illustration | Image |
| Show a user profile picture with initials fallback | Avatar |
| Show multiple overlapping user avatars | Avatar Group |
| Display a UI glyph/symbol (decorative, not clickable) | Icon |
| Create an icon that triggers an action on click | Icon Button |
| Show many images in a grid or gallery | Image Grid |
| Display video, audio, or mixed file types | Media |
| Create a swipeable set of image slides | Carousel |
| Make an arbitrary area clickable (not just an image) | Pressable |
Image Examples
Frequently Asked Questions
My image shows a broken icon even though the URL is correct. What should I check?
First verify that the URL is publicly accessible and returns the correct MIME type. If you are using a dynamic binding like {{ row.imageUrl }}, check that the expression resolves to a string (not undefined or null). Add a fallback slot in the Image block's Slots panel — drop any block there (a Text or Icon block works well) and it renders automatically whenever the image fails to load.
When should I use an Avatar block instead of an Image block?
Use Avatar for user profile pictures. Avatar supports initials (automatically generated from a name or manually entered), a fallback icon, and built-in Badge/Label add-ons designed for people representations. Image is a general-purpose media block — use it for product photos, illustrations, and any non-person imagery where the Avatar semantics and add-ons are not needed.
How do I open the full-size version of an image when a user clicks it?
Add an On Click interaction to the Image block and choose the Open In Media Viewer method action. This works on web apps only; on mobile the image opens inside the native OS viewer. If the app must work cross-platform, consider routing to a new page or displaying the image inside a Modal instead.
Can I use Icon Button without any visible label?
Yes — Icon Button is designed to be icon-only by default. Set a tooltip text in the Tooltip property so keyboard and assistive-technology users understand its purpose. Avoid using a plain Icon block for clickable actions because it lacks the focus style and accessible button role that Icon Button provides.