---
title: "Link Element"
slug: "link-element-widget"
updated: 2026-07-31T10:16:44Z
published: 2026-07-31T10:16:44Z
canonical: "learn.servitly.com/link-element-widget"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://learn.servitly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Link Element

Displays a button that the user can click to navigate to another page.

![Link Element](https://components-manager.servitly.com/components/LinkElement_1/IMAGES/_screenshot?owner=AG_Servitly)

You can put this element directly in the grid area as an independent button, once clicked the referenced URL is navigated.

The URL you want to navigate is an application URL, which can be relative to the current navigated page (e.g. consumption), or absolute (e.g. /main/statistics)

In the alternative, you can put the link-element in a widget, doing so the widget will display it at its bottom, or depending on the widget, the entire widget will be clickable (e.g. gauges).

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/widgetLinkElement(1).png)

## Template Syntax

Below you can find some examples of how to use the component within a template.

```xml

            /* standalone button */
            <link-element url="/overview" label="Overview" description="Go to the overview page"></link-element>

            /* embedded button */
            <thing-details-widget title="Info">

            <property name="serialNumber"></property>
            <property name="thingDefinition.name" label="Model Name"></property>

            <link-element url="consumption" description="Displays the thing consumption"></link-element>

            </thing-details-widget>
        
```

## Component Reference

Here is a comprehensive list of all the elements and properties that can be used to configure the component.

#### Link Element `&lt;link-element&gt;`

| *Description* | The description of the widget. **Name**: description **Type**: STRING \| Optional `description="abc"` |
| --- | --- |
| *Icon* | The [Google Fonts](https://fonts.google.com/icons) icon (e.g. save) or [Google Fonts (5 free)](https://fontawesome.com/v5/search?ic=free-collection) icon (e.g. fas fa-home) to be displayed before the link label. **Name**: icon **Type**: STRING \| Optional `icon="abc"` |
| *Label* | The alternative label displayed by the widget. **Name**: label **Type**: STRING \| Optional `label="Temperature"` |
| *URL* | The URL to browse, '/...' for application relative URL, 'https://....' for external URLs, else it is considered relative to the current page. **Name**: url **Type**: STRING \| Required `url="abc"` |
| **Rendering** |
| *Availability* | Configure availability based on active features on Digital Plan on Add-ons **Name**: hasFeature **Type**: FEATURE (multiple) \| Optional `[hasFeature]="['feature_a', 'feature_b']"` |
| *CSS Class* | The name(s) of the CSS class used to customize the widget layout. **Name**: class **Type**: STRING \| Optional `class="my-custom-class"` |
| *Visibility Condition* | The expression that allows you to reduce the visibility of the element. **Name**: *ngIf **Type**: STRING \| Optional `*ngIf="getUser().organizationId != null"` |

## Full Syntax Example

```xml

<link-element    
    label="Temperature"
    url="abc"
    icon="abc"
    description="abc"
    class="my-custom-class"
    *ngIf="getUser().organizationId != null"
    hasFeature="['feature_a', 'feature_b']"></link-element>
```