Skip to content

Label Component

A Image is a basic component used to display image. It supports some styling.

Example

{
  "id": /* id object */,
  "subset": "image",
  "style": {
    "id": /* id object */,
    "shape": /* "rounded" or "rounded-square" */,
    "height": /* dimension object */,
    "width": /* dimension object */,
    "padding": /* dimension object */,
    "tintColor": /* color object */,
    "alpha": /* dimension object */,
    "backgroundColor": /* color object */
  },
  "content": {
    "values": /* array of image object */,
    "description": /* text object */,
  }
}

🔑 Keys

id

  • Object ID: a unique identifier used to reference this component locally or externally.
  • Optional if the object is inline and not meant for reuse.

subset

  • MANDATORY: Must be exactly "image" to define the component type.
  • MANDATORY if not resolved by another pointing reference (e.g., when the component is not coming from a resolved reference).

🎨 style

Style defines visual aspects of the label like font size or color. You can reuse existing styles via the id key or define them inline.

"style": {
    "id": /* id object */,
    "shape": /* "rounded" or "rounded-square" */,
    "height": /* dimension object */,
    "width": /* dimension object */,
    "padding": /* dimension object */,
    "tintColor": /* color object */,
    "alpha": /* dimension object */,
    "backgroundColor": /* color object */
}
  • id: Reference to a shared Style object.
  • shape: Specifies the shape frame of the image; either "rounded" or "rounded-square".
  • height, width, padding, alpha: Reference to a Dimension object.
  • tintColor, backgroundColor: Reference to a Color object.

📝 content

The values array holds image object. And description is an accessibility text object.

"content": {
    "values": /* array of image object */,
    "description": /* text object */,
}