The Link component is similar to the Text component, but has the ability to display additional information at the right of the component, in blue. Link components also have optional styles and you can configure how they display when their value is empty.

The image below shows a card with five Link components. The first Link component displays only a label. The rest of the components all have values that display in blue. The last two use styles - Warning, and Info.

Link dashboard components
Link dashboard components

​The following Link components are configured to display their value as a disabled link when the value is empty.

Disabled Link components
Disabled Link components

The Link component (type = link) uses the following properties:

Property Type Description Required?
label String The text that displays to the left of the link yes
description String Text displayed below the label no
value String Content to display as the link text no - link component renders as disabled if no value is given
style String Sets a predefined style for the component. Values can be:
* warning: displays an orange icon
* info: displays a blue icon
no
link URL URL to the content that displays in the takeover when the link is clicked. Must be served over HTTPS. Can include a JWT token.

All URLs must use the HTTPS protocol. You will not be able to upload an app that uses HTTP.
yes
disable_when_empty Boolean When set to true, when the value of the value property is not null but it resolves to a false value, the link will render as disabled. If set to false, then the link always displays as active. Default is true. no

These images shows how the properties are used to display the Link component.

Properties in the Link component
Properties in the Link component

Here’s an example of the JSON to display the link components shown in the above image.


[
    {
        "type": "link",
        "label": "Link with no style or value",
        "link": "https://myurl.com:jwt"
    },
    {
        "type": "link",
        "label": "Link with a value",
        "description": "And a description!",
        "value": "10,500",
        "link": "https://myurl.com:jwt"
    },
    {
        "type": "group",
        "components": [
            {
                "type": "link",
                "label": "Warning style",
                "value": 50,
                "style": "warning",
                "link": "https://myurl.com:jwt"
            },
            {
                "type": "link",
                "label": "Info style",
                "value": 50,
                "style": "info",
                "link": "https://myurl.com:jwt"
            },
            {
                "type": "link",
                "label": "Disable when empty true & 0 value",
                "value": 0,
                "style": "info",
                "link": "https://myurl:jwt",
                "disable_when_empty": true
            },
        ]
    },
]

Keep the following in mind when using the Link component:

  • Link components are great for allowing the user to drill down into certain types of data, such as “View all” or “Pending comments” with a value.

Help make these docs better!