Skip to main content

Link (ALPHA)

BusinessEnterprise
Alpha feature: invite only

Responsive Widgets are in alpha and available by invitation only on Business and Enterprise plans. Behavior and properties may change. To request access, open a support ticket and name the feature Responsive Widgets (ALPHA).

The Link widget shows a text link. Use it to send users to another page in your app or to an external site. It can also run an action when users click it. The link uses the theme's accent color.

Widget type: WDS_LINK_WIDGET

Link widget in a Responsive app
Link widget

Content properties​

These properties appear in the Content tab of the property pane.

Basic​

Text string​

Sets the visible text of the link. If empty, the link shows the URL instead. Default: Link.

URL string​

Sets where the link goes. Default: https://www.appsmith.com.

The widget only renders safe URLs as links. When the app runs, it allows:

  • Relative paths, for example /page-slug.
  • Absolute URLs that start with http:, https:, or mailto:.

It rejects every other scheme, for example javascript:, data:, and vbscript:. It also rejects protocol-relative values, such as //example.com or \\example.com. Hidden control characters are removed before the check.

If the URL is empty or rejected:

  • With an onClick action, the widget shows a link without a destination. Clicking it, or pressing Enter, runs the action.
  • Without an onClick action, the widget shows plain text.

The property pane also checks the URL and shows an error for unsafe values.

General​

Open in string​

Sets where the link opens. Options:

  • Same tab (default). Value: self.
  • New tab. Value: blank. A new tab always opens with rel="noopener noreferrer", so the new page cannot control your app.

Visible boolean​

Controls whether the widget is visible. Default: on.

Animate loading boolean​

Controls the loading animation of the widget. Default: on.

Style properties​

These properties appear in the Style tab of the property pane. The link color comes from the theme. You cannot change it.

General​

Text size string​

Sets the size of the link text. Options: Footnote, Caption, Body (default), Subtitle.

Values for code: footnote, caption, body, subtitle.

Emphasis string​

Makes the link text bold, italic, or both.

Reference properties​

Reference properties let you read the widget's state in bindings and code, for example {{Link1.isVisible}}. You cannot set them directly.

isVisible boolean​

Shows whether the widget is visible.

Example:

{{Link1.isVisible}}

text string​

Holds the link text.

Example:

{{Link1.text}}

url string​

Holds the link URL.

Example:

{{Link1.url}}

target string​

Holds where the link opens: self or blank.

Example:

{{Link1.target}}

Methods​

Methods let you change the widget's properties from code, for example in a JS Object.

setVisibility (param: boolean): Promise​

Shows or hides the widget.

Example:

Link1.setVisibility(false)

setText (param: string): Promise​

Sets the link text.

Example:

Link1.setText("Read the docs")

setURL (param: string): Promise​

Sets the link URL. The same safety checks apply.

Example:

Link1.setURL("https://docs.appsmith.com")

Events​

onClick​

Runs when users click the link. This is optional. If the URL is valid, the action runs and the link also opens. If the URL is empty or rejected, only the action runs.