The Action component is a clickable link that displays at the right side of the card, used as a call to action. The card below shows action components placed after text components. You can configure the component to display a plus sign.

The Action dashboard component

Action Properties

The Action component (type = action) uses the following properties:

Property Type Description Required?
label ​String Text displayed as a link yes
link ​String ​URL to the content that displays in the takeover when the link is clicked. Must be served over HTTPS. Can include a JWT token. yes
action_type ​String Set to add to display a + icon after the link text. If not set, only the label text displays no

​This graphic shows how the properties are used to display the Action component (Action components are displayed below Text components).

Properties of the Action component

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


[
    {
        "type": "action",
        "label": "Manage Campaigns",
        "link": "https://myurl.com:jwt"
    },
. . .
    {
        "type": "action",
        "label": "Add Item",
        "link": "https://myurl.com:jwt",
        "action_type": "add"
    }
]

Action Design Considerations

Keep the following in mind when using the Action component:​

  • ​Action components should only be used as a shortcut to common actions, not to include a general link.
  • Cards should typically only contain 1 Action component, and it should be located at the bottom of the card.

Help make these docs better!