Skip to content

Component Definition

The component key defines a UI element, either directly or by referencing a shared definition. It supports reuse via references, and provides configuration using id, subset, style, content, and option.

1. Full Object Format

  • id: follows the same rules outlined in ID Definition. It can be a unique ID, a pointer, or a combination.
  • subset: Mandatory unless inherited through a reference. Indicates the component type (e.g., button, input, label).
  • option: A Option Object applied to this component.
  • style: A Style Object applied to this component.
  • content: A Content Object applied to this component.

Example:

"component": {
  "id": "submit-button",
  "subset": "button",
  "style": "*style-primary-button",
  "content": {
    "label": "Submit",
    "action": {
      "value": "form-send://url/form-from-newletter-subscription",
      "params": {
        "action-validated": "navigate://url/page-confirmation"
      }
    }
  },
  "option": {
    "analytics": ["on-appear", "on-click"]
  }
}

2. Pointer Reference (Short Syntax)

A component can be defined by referencing a shared or previously defined component using a string starting with *.

"component": "*shared-submit-button"

Equivalent to:

"component": {
  "id": "*shared-submit-button"
}

If the referenced component does not define subset, the current reference must include it.

Subset Resolution Rules

  • subset is mandatory if:

    • The component is defined inline and not referencing anything.
    • The referenced component does not define a subset.

  • subset is optional if:

    • The referenced component already defines it.

Failure to define subset where required will result in a parsing error.

Summary Table

Field Required Description
id Optional Identifier or pointer (see ID)
subset Conditional Required unless inherited through a pointer
option Optional A Option Object to apply to this component
style Optional A Style Object to apply to this component
content Optional A Content Object to apply to this component

For supported subset values and component-specific options, see the Components Definition.