The component for opening a link in a button.
Technology
- Apple News Format 1.11+
Properties
role
string
Always link
for this component.
accessibility Label
string
A string that is read to the user when certain accessibility functionalities are enabled.
anchor
An object that defines vertical alignment with another component.
animation
*
An object that defines an animation to be applied to the component.
To remove a previously set condition, use none
.
behavior
*
conditional
*
An instance or array of button properties that can be applied conditionally, and the conditions that cause them to be applied.
hidden
boolean
A Boolean value that determines whether the component is hidden.
identifier
string
A unique identifier for this component. If used, identifier must be unique across the entire document. An identifier is required if you want to anchor other components to this component.
layout
*
An inline Component
object that contains layout information, or a string reference to a Component
that is defined at the top level of the document.
If layout is not defined, size and position are based on various factors, such as the device type, the length of the content, and the role
of this component.
style
*
An inline Component
e object that defines the appearance of this component, or a string reference to a Component
that is defined at the top level of the document.
The none
value is used for conditional design elements. Adding it here has no effect.
text
string
The text, styled according to the text
definition.
text Style
*
An inline Component
object that contains styling information, or a string reference to a Component
object that is defined at the top level of the document.
The URL to open when a user interacts with the range of text specified in the addition.
Discussion
Use the Link
component to display a button with a link. The link opens when the user interacts with the button. The Link
can be placed anywhere in the document and is styled using ComponentStyle and ComponentTextStyle properties.
Example
{
"components": [
{
"role": "link_button",
"URL": "http://apple.com",
"text": "Read More",
"style": {
"backgroundColor": "#DDD",
"mask": {
"type": "corners",
"radius": 25
}
},
"layout": {
"padding": 10
}
}
]
}