Icon Button

The Icon Button block is a compact, pressable button whose face is a single icon. It comes with the same color schemes (Brand, Neutral, Success, Danger), variants (Solid, Outline, Soft, Ghost), and sizes as the Button block, plus reactive Disabled and Loading conditions. A new Icon Button starts as a medium solid brand button with a clock icon.

Tip: When to use Icon Button: Trigger an action from a small, icon-only control — delete, edit, refresh, close — in tight spots like table rows, card headers, and toolbars. Pick Icon Button over the Icon block whenever the user is meant to press it: you get hover/pressed styling, disabled state, and a loading spinner. If the action needs a text label, use the Button block.

Properties

Content

Appearance

Events

Behavior & Gotchas

Warning: An unrecognized icon name removes the whole button. If the icon name doesn't resolve, the entire button disappears — not just the glyph. A binding that returns an unknown name silently deletes the control from the page.

Warning: A long press swallows the following click. On mobile, after a long press fires, the click that would follow is suppressed. Long press is inert on desktop even if configured.

Note: The tooltip doubles as the screen-reader label. Without a tooltip, screen readers announce the raw icon name (e.g. "DotsVertical"). Give action buttons a tooltip for both sighted users and accessibility.

Examples

Link

The Link block is a clickable hyperlink in two flavors: Inline (a piece of styled text) or Block (a body slot you fill with any content, making the whole area one link). It navigates to a URL, optionally in a new tab, with brand/neutral/error coloring, underline control, optional start and end icons, and an On Click event that fires alongside navigation.

Tip: When to use Link: Navigate the user to another page or external site from a piece of text. Use Block type to make a whole composed area — icon, title, description — clickable as one link. To run actions without navigating, prefer Button. To display a URL's preview card, prefer Link Preview.

Properties

Content

Appearance

Events

Behavior & Gotchas

Note: An empty Text shows the URL instead. For an inline link with no Text set, the raw URL becomes the visible label.

Warning: A missing URL still renders a clickable link. With no URL set, the link displays and fires On Click; inside a published app its target falls back to #, which may scroll to the top of the page.

Note: New-tab links are opened safely. When Open in new tab is on, the new tab opens with browser protections (noopener noreferrer) that prevent the target from controlling your page.

Examples

Link Preview

The Link Preview block turns one or more URLs into rich preview cards — cover image, page title, a four-line description, the domain and its favicon — the way a chat app unfurls a pasted link. One URL renders a single card; several URLs render as a swipeable carousel with dot navigation. Page metadata is fetched from a platform automation that reads the links in one batch.

Tip: When to use Link Preview: Unfurl links inside conversational or feed-like surfaces so users see what a URL leads to before clicking. Show several shared links compactly in a carousel. For a plain clickable hyperlink with your own text, use the Link block instead.

Properties

The block has no inspector panels of its own — its content is supplied as data by the surface that embeds it, most commonly a chat or copilot message containing links.

Behavior & Gotchas

Warning: The block can vanish silently. It renders nothing when the URL list is empty, when the metadata lookup fails, or when none of the URLs produce a usable preview. Design the surrounding layout so a missing preview isn't jarring.

Warning: A page with only a title and description is filtered out. The cover image is the admission ticket — a URL that has no preview image is dropped entirely after the skeleton resolves.

Note: Previews depend on a platform automation. Metadata comes from the platform's link-batch-preview automation. If that automation isn't configured or errors, no previews render anywhere the block is used.

Note: Multiple links navigate by dots only. Two or more cards render in a carousel with dot indicators; there are no previous/next arrow buttons.

Examples

Related Blocks

Frequently Asked Questions

How do I make an Icon Button accessible to screen readers?

The Icon Button block has a Tooltip field in the inspector. Set it to a clear action label like "Delete record" or "Open settings". This text is rendered as an aria-label on the underlying button element, so screen readers announce the purpose rather than just "button". Without a tooltip, icon-only buttons have no accessible label.

What is the difference between a Link block with Type = Block and an Icon Button?

A Link block with Type set to Block renders as a block-level element that spans its container's full width, making the entire area tappable. It navigates to a URL or fires On Click. An Icon Button is always an icon-sized pressable element — use it for icon-only actions. Use a Block Link when you want a large clickable region that wraps other content, like a card navigation area.

My Link Preview card never shows — what's required?

Link Preview has two hard requirements: (1) you must configure a Platform Automation that fetches metadata from the URL (title, description, image), because the block does not fetch metadata directly; and (2) the fetched payload must include an image URL — the card is only rendered when an image is present. Without both, the block stays empty. Verify your automation is running and returning the expected image field.

Can I open a link in a new tab programmatically?

Yes. The Link block's Open in new tab property controls this. Bind it to a boolean expression if you want context-dependent behavior — for example open in a new tab only when the link is an external URL. There is no method to override this at runtime; the property drives the behavior declaratively.