Contents

ConditionalButton

The object for defining a button component’s conditional properties, and when the conditional properties are in effect.

Declaration

object ConditionalButton

Properties

NameTypeDescription
conditions Required(Condition | [Condition])

An instance or array of conditions that, when met, cause the conditional component properties to take effect.

anchorAnchor

An object that defines vertical alignment with another component.

animation(ComponentAnimation | string("none"))

An object that defines an animation to apply to the component.

To remove a previously set condition, use none.

behavior(Behavior | string("none"))

An object that defines behavior for a component, like Parallax or Springy.

hiddenboolean

A Boolean value that determines whether Apple News hides the component.

layout(ComponentLayout | string)

An inline ComponentLayout object that contains layout information, or a string reference to a ComponentLayout object that you define at the top level of the document.

If you don’t define layout, Apple News bases the size and position on various factors, such as the device type, the length of the content, and the role of this component.

style(ComponentStyle | string | string("none"))

An inline ComponentStyle object that defines the appearance of this component, or a string reference to a ComponentStyle object that you define at the top level of the document.

textStyle(ComponentTextStyle | string)

An inline ComponentTextStyle object that contains styling information, or a string reference to a ComponentTextStyle object that you define at the top level of the document.

Discussion

Use the ConditionalButton object to define an array of conditional button properties and the conditions under which to apply them. When a condition is met, the value of a property in ConditionalButton overrides the value of the same property if you define it in the parent button component. See LinkButton.

Example

{
  "components": [
    {
      "role": "link_button",
      "URL": "http://apple.com",
      "text": "Read More",
      "style": {
        "backgroundColor": "#DDD",
        "mask": {
          "type": "corners",
          "radius": 25
        }
      },
      "layout": {
        "padding": 10
      },
      "conditional": [
        {
          "style": "dark-mode-background",
          "textStyle": "dark-mode-text-style",
          "conditions": [
            {
              "preferredColorScheme": "dark"
            }
          ]
        },
        {
          "style": "light-mode-background",
          "textStyle": "light-mode-text-style",
          "conditions": [
            {
              "preferredColorScheme": "light"
            }
          ]
        }
      ]
    }
  ],
  "componentStyles": {
    "dark-mode-background": {
      "backgroundColor": "#5e5e5e",
      "mask": {
        "type": "corners",
        "radius": 25
      }
    },
    "light-mode-background": {
      "backgroundColor": "#DDD",
      "mask": {
        "type": "corners",
        "radius": 25
      }
    }
  },
  "componentTextStyles": {
    "dark-mode-text-style": {
      "textColor": "#FFF"
    },
    "light-mode-text-style": {
      "textColor": "#000"
    }
  }
}

See Also

Conditional Design Elements