This page covers three blocks: Icon Button, Link and Link Preview.
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
Property | Type | Default | Description |
|---|---|---|---|
| string (icon name) |
| The icon shown on the button. Bindable and condition-driven. |
| Text or Custom add-on | None (add-on off) | Shown on hover. Text shows a text tooltip, which also becomes the button's screen-reader label. Custom gives you a slot to compose the tooltip from other blocks, with Placement (Auto or Manual) and Offset settings. |
Appearance
| Property | Type | Default | Description |
color | "brand" | "neutral" | "success" | "danger" | brand | The button's color scheme. Supports conditions. |
size | "xs" | "sm" | "md" | "lg" | md | The button's size step. |
variant | "solid" | "outline" | "soft" | "ghost" | solid | Filled, bordered, tinted, or bare styling. |
disabled | condition | — | Disables the button when the condition is true. |
loading | condition | — | Shows a spinner and blocks presses while true. |
Events
| Event | Trigger | Available when |
On Click | User clicks or taps the button | Always |
On Long Press | User presses and holds | Mobile and tablet only |
Behavior & Gotchas
Warning: An unrecognized icon name leaves a button with no glyph. If a binding returns an icon name that doesn't exist, the button stays on the page and is still clickable, but nothing is drawn inside it. A missing or empty icon removes the button from the layout. Check the icon name with the icon picker, and set a Tooltip so the button always has a label.
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.
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.
The same Link block is also documented on the Typography & Link page, with a step-by-step example of making a whole card clickable.
Properties
Content
Property | Type | Default | Description |
|---|---|---|---|
Type | Inline or Block | Inline | Inline shows a Text property; Block shows a Body slot instead. |
URL | string (bindable) | — | Where the link navigates on click. |
Text | string | Click here | Inline only (optional). The link's visible text. |
Open in new tab | True, False or Conditions | False | Opens the target in a new browser tab. Not shown for the mobile layout. |
Slots → Body | child blocks | Column with "Click here" text | Block type only (optional). Any blocks composed inside become the clickable area. |
Appearance
Property | Type | Default | Description |
|---|---|---|---|
Color | Brand, Neutral or Error | Brand | The link's color scheme. |
Typography | size, weight | text-sm, regular | The link text's size and weight. |
Underline | None, Hover or Always | Hover | When the underline shows. |
Start Icon / End Icon | icon | — | Icons placed before and after the link text. Condition-driven. |
Disabled | condition | off | Disables the link: no navigation, no click event. |
Events
| Event | Trigger | Available when |
On Click | User clicks the link; fires in addition to the navigation itself | Always |
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.
Note: Clicks don't leak to clickable parents. A click on a Link inside a clickable container, such as a card header, triggers only the link, not the container's own click behavior.
Note: Private platform file links resolve at click time. A URL pointing at a platform-protected file download is exchanged for a temporary download address when the user clicks. If that fails, the original URL is used.
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
| Property | Type | Default | Description |
urls | array of { url, openInNewTab? } | [] | The list of links to preview. Supplied by the embedding surface; not editable in the inspector. |
You can't add Link Preview from the block picker: the builder doesn't offer it. It appears where the platform renders links as cards, most commonly inside a chat or copilot message, and that surface supplies the URLs. The block has no inspector panels of its own.
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.
Related Blocks
Block | Relationship |
|---|---|
Runs actions on click without a navigation target; has a visible text label. | |
Display-only sibling to Icon Button: glyph with badge/tooltip, no button states. | |
Embeds the live page itself rather than a metadata card. | |
Plain text without navigation. Use Link when the text must navigate somewhere. |