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.
The following Link components are configured to display their value as a disabled link when the value is empty.
The Link component (
link) uses the following properties:
||String||The text that displays to the left of the link||yes|
||String||Text displayed below the label||no|
||String||Content to display as the link text||no - link component renders as disabled if no value is given|
||String||Sets a predefined style for the component. Values can be:
||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.
||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.
Here’s an example of the JSON to display the link components shown in the above image.
Link Design Considerations
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.