CTA

Call-to-action button with variant, size, text, and icon options. All variants use pill/circle shape.

type: "cta"interactiveleaf

variant: filled

Primary filled button — pill shape, white text

{
  "type": "cta",
  "data": {
    "variant": "filled",
    "size": "large",
    "text": "Buy Now",
    "ui": {
      "layout": {
        "size": {
          "width": "fill"
        }
      }
    }
  }
}

Quick Start

{
  "type": "cta",
  "data": {
    "text": "value"
  }
}

Data Fields

Field	Type	Default	Description
variant	enum filledoutlinedtexticon	filled	Visual style variant
size	enum smallmediumlarge	large	Button size (small=32dp, medium=40dp, large=48dp)
button_type	enum texticon	text	Button type (text or icon-only)
textrequired	string	—	Button label text
icon_url	string	—	Icon image URL (rendered without tint)
icon_position	enum leadingtrailingnone	none	Icon placement relative to text (icon size: 20dp)

Style Fields

Field	Type	Default	Description
background_color	color	—	Button fill (filled/icon) or border+text (outlined). Falls back to primary 500.
text_color	color	—	Custom text/icon color

Layout Fields

Parent Layout Fields

Examples

variant: outlined

Outlined border with primary color

{
  "type": "cta",
  "data": {
    "variant": "outlined",
    "size": "medium",
    "text": "Add to Favorites"
  }
}

variant: text

Minimal text-only button (transparent bg)

{
  "type": "cta",
  "data": {
    "variant": "text",
    "size": "medium",
    "text": "View All"
  }
}

variant: icon

Circular 40×40dp icon button with backgroundColor

{
  "type": "cta",
  "data": {
    "variant": "icon",
    "buttonType": "icon",
    "iconUrl": "https://api.iconify.design/mdi/heart-outline.svg"
  }
}

size: small (32dp)

Compact button at 32dp height

{
  "type": "cta",
  "data": {
    "variant": "filled",
    "size": "small",
    "text": "Small"
  }
}

size: medium (40dp)

Medium button at 40dp height

{
  "type": "cta",
  "data": {
    "variant": "filled",
    "size": "medium",
    "text": "Medium"
  }
}

size: large (48dp)

Default large button at 48dp height

{
  "type": "cta",
  "data": {
    "variant": "filled",
    "size": "large",
    "text": "Large (Default)"
  }
}

All Sizes Comparison

Small, medium, large side by side

{
  "type": "row",
  "data": {
    "children": [
      {
        "type": "cta",
        "data": {
          "variant": "filled",
          "size": "small",
          "text": "S"
        }
      },
      {
        "type": "cta",
        "data": {
          "variant": "filled",
          "size": "medium",
          "text": "M"
        }
      },
      {
        "type": "cta",
        "data": {
          "variant": "filled",
          "size": "large",
          "text": "L"
        }
      }
    ],
    "ui": {
      "layout": {
        "spacing": 8,
        "crossAxis": "center"
      }
    }
  }
}

iconPosition: leading

20dp icon before text

{
  "type": "cta",
  "data": {
    "variant": "filled",
    "size": "large",
    "text": "Chat with Seller",
    "iconUrl": "https://api.iconify.design/mdi/chat-outline.svg",
    "iconPosition": "leading",
    "ui": {
      "layout": {
        "size": {
          "width": "fill"
        }
      }
    }
  }
}

iconPosition: trailing

20dp icon after text

{
  "type": "cta",
  "data": {
    "variant": "outlined",
    "size": "small",
    "text": "Share",
    "iconUrl": "https://api.iconify.design/mdi/share-variant-outline.svg",
    "iconPosition": "trailing"
  }
}

Custom backgroundColor

Filled button with success.500 background

{
  "type": "cta",
  "data": {
    "variant": "filled",
    "size": "large",
    "text": "WhatsApp",
    "iconUrl": "https://api.iconify.design/mdi/whatsapp.svg",
    "iconPosition": "leading",
    "ui": {
      "style": {
        "backgroundColor": {
          "palette": "success",
          "shade": 500
        }
      }
    }
  }
}

Custom textColor

Text variant with custom text color

{
  "type": "cta",
  "data": {
    "variant": "text",
    "size": "medium",
    "text": "Delete",
    "ui": {
      "style": {
        "textColor": {
          "palette": "error",
          "shade": 500
        }
      }
    }
  }
}

Icon Only (custom bg)

Icon button with success.50 background

{
  "type": "cta",
  "data": {
    "variant": "icon",
    "buttonType": "icon",
    "iconUrl": "https://api.iconify.design/mdi/whatsapp.svg",
    "ui": {
      "style": {
        "backgroundColor": {
          "palette": "success",
          "shade": 50
        }
      }
    }
  }
}

CTA Row (Production)

Three icon-only CTAs as seen in listing cards

{
  "type": "row",
  "data": {
    "children": [
      {
        "type": "cta",
        "data": {
          "variant": "icon",
          "buttonType": "icon",
          "iconUrl": "https://api.iconify.design/mdi/phone.svg",
          "ui": {
            "style": {
              "backgroundColor": {
                "palette": "primary",
                "shade": 50
              }
            }
          }
        }
      },
      {
        "type": "cta",
        "data": {
          "variant": "icon",
          "buttonType": "icon",
          "iconUrl": "https://api.iconify.design/mdi/whatsapp.svg",
          "ui": {
            "style": {
              "backgroundColor": {
                "palette": "success",
                "shade": 50
              }
            }
          }
        }
      },
      {
        "type": "cta",
        "data": {
          "variant": "icon",
          "buttonType": "icon",
          "iconUrl": "https://api.iconify.design/mdi/information-outline.svg",
          "ui": {
            "style": {
              "backgroundColor": {
                "palette": "info",
                "shade": 50
              }
            }
          }
        }
      }
    ],
    "ui": {
      "layout": {
        "spacing": 8,
        "crossAxis": "center"
      }
    }
  }
}

Full Width + Icon

Filled button spanning full width with leading icon

{
  "type": "cta",
  "data": {
    "variant": "filled",
    "size": "large",
    "text": "Call Seller",
    "iconUrl": "https://api.iconify.design/mdi/phone.svg",
    "iconPosition": "leading",
    "ui": {
      "style": {
        "backgroundColor": {
          "palette": "success",
          "shade": 500
        }
      },
      "layout": {
        "size": {
          "width": "fill"
        }
      }
    }
  }
}

Production Patterns

Real patterns extracted from the 4Sale production API.

Icon-Only CallSmall icon button with primary 50 background

{
  "type": "cta",
  "data": {
    "variant": "icon",
    "size": "small",
    "buttonType": "icon",
    "iconUrl": "https://api.iconify.design/mdi/phone.svg",
    "ui": {
      "style": {
        "backgroundColor": {
          "palette": "primary",
          "shade": 50
        }
      }
    }
  }
}

Icon-Only WhatsAppSmall icon button with success 50 background

{
  "type": "cta",
  "data": {
    "variant": "icon",
    "size": "small",
    "buttonType": "icon",
    "iconUrl": "https://api.iconify.design/mdi/whatsapp.svg",
    "ui": {
      "style": {
        "backgroundColor": {
          "palette": "success",
          "shade": 50
        }
      }
    }
  }
}

Icon-Only InfoSmall icon button with info 50 background

{
  "type": "cta",
  "data": {
    "variant": "icon",
    "size": "small",
    "buttonType": "icon",
    "iconUrl": "https://api.iconify.design/mdi/information-outline.svg",
    "ui": {
      "style": {
        "backgroundColor": {
          "palette": "info",
          "shade": 50
        }
      }
    }
  }
}

Outlined ChatOutlined CTA with leading icon and weight — used in full cards

{
  "type": "cta",
  "data": {
    "variant": "outlined",
    "size": "small",
    "text": "محادثة",
    "iconUrl": "https://api.iconify.design/mdi/chat-outline.svg",
    "iconPosition": "leading",
    "ui": {
      "style": {
        "backgroundColor": {
          "palette": "primary",
          "shade": 500
        },
        "textColor": {
          "palette": "primary",
          "shade": 500
        }
      },
      "parentLayout": {
        "weight": 1
      }
    }
  }
}

Carousel

Card