diff --git a/packages/visual-editor/locales/platform/cs/visual-editor.json b/packages/visual-editor/locales/platform/cs/visual-editor.json
index be6f1959a..191f27eca 100644
--- a/packages/visual-editor/locales/platform/cs/visual-editor.json
+++ b/packages/visual-editor/locales/platform/cs/visual-editor.json
@@ -186,6 +186,7 @@
     "browText": "Text na obočí",
     "businessLogo": "Obchodní logo",
     "buttons": "Tlačítka",
+    "buttonStyles": "Styly tlačítek",
     "buttonText": "Text tlačítka",
     "cardTitleColor": "Barva názvu karty",
     "cardVariant": "Varianta karty",
@@ -280,6 +281,7 @@
     "linkLabel": "Štítek odkazu",
     "links": "Odkazy",
     "linksTooltip": "Pokud je výřez příliš úzký, odkazy se automaticky sbalí",
+    "linkStyles": "Styly odkazů",
     "linkTarget": "Cíl odkazu",
     "linkType": "Typ odkazu",
     "listLength": "Délka seznamu",
diff --git a/packages/visual-editor/locales/platform/da/visual-editor.json b/packages/visual-editor/locales/platform/da/visual-editor.json
index c4f7a5656..d229b6faa 100644
--- a/packages/visual-editor/locales/platform/da/visual-editor.json
+++ b/packages/visual-editor/locales/platform/da/visual-editor.json
@@ -186,6 +186,7 @@
     "browText": "Bryn tekst",
     "businessLogo": "Forretningslogo",
     "buttons": "Knapper",
+    "buttonStyles": "Knapstile",
     "buttonText": "Knaptekst",
     "cardTitleColor": "Kortets titelfarve",
     "cardVariant": "Kortvariant",
@@ -280,6 +281,7 @@
     "linkLabel": "Link-etiket",
     "links": "Links",
     "linksTooltip": "Links vil automatisk kollapse, hvis visningsporten er for smal",
+    "linkStyles": "Link stilarter",
     "linkTarget": "Linkmål",
     "linkType": "Linktype",
     "listLength": "Liste længde",
diff --git a/packages/visual-editor/locales/platform/de/visual-editor.json b/packages/visual-editor/locales/platform/de/visual-editor.json
index e1fdc475e..052658cb2 100644
--- a/packages/visual-editor/locales/platform/de/visual-editor.json
+++ b/packages/visual-editor/locales/platform/de/visual-editor.json
@@ -186,6 +186,7 @@
     "browText": "Stirntext",
     "businessLogo": "Geschäftslogo",
     "buttons": "Buttons",
+    "buttonStyles": "Schaltflächenstile",
     "buttonText": "Schaltflächentext",
     "cardTitleColor": "Farbe des Kartentitels",
     "cardVariant": "Karten-Variante",
@@ -280,6 +281,7 @@
     "linkLabel": "Link-Label",
     "links": "Links",
     "linksTooltip": "Links werden automatisch eingeklappt, wenn das Viewport zu schmal ist",
+    "linkStyles": "Link-Stile",
     "linkTarget": "Link-Ziel",
     "linkType": "Link-Typ",
     "listLength": "Listenlänge",
diff --git a/packages/visual-editor/locales/platform/en-GB/visual-editor.json b/packages/visual-editor/locales/platform/en-GB/visual-editor.json
index 1f00ff43f..0556ff162 100644
--- a/packages/visual-editor/locales/platform/en-GB/visual-editor.json
+++ b/packages/visual-editor/locales/platform/en-GB/visual-editor.json
@@ -186,6 +186,7 @@
     "browText": "Brow Text",
     "businessLogo": "Business Logo",
     "buttons": "Buttons",
+    "buttonStyles": "Button Styles",
     "buttonText": "Button Text",
     "cardTitleColor": "Card Title Color",
     "cardVariant": "Card Variant",
@@ -280,6 +281,7 @@
     "linkLabel": "Link Label",
     "links": "Links",
     "linksTooltip": "Links will automatically collapse if the viewport is too narrow",
+    "linkStyles": "Link Styles",
     "linkTarget": "Link Target",
     "linkType": "Link Type",
     "listLength": "List Length",
diff --git a/packages/visual-editor/locales/platform/en/visual-editor.json b/packages/visual-editor/locales/platform/en/visual-editor.json
index 17935d4d4..60cb8480c 100644
--- a/packages/visual-editor/locales/platform/en/visual-editor.json
+++ b/packages/visual-editor/locales/platform/en/visual-editor.json
@@ -186,6 +186,7 @@
     "browText": "Brow Text",
     "businessLogo": "Business Logo",
     "buttons": "Buttons",
+    "buttonStyles": "Button Styles",
     "buttonText": "Button Text",
     "cardTitleColor": "Card Title Color",
     "cardVariant": "Card Variant",
@@ -280,6 +281,7 @@
     "linkLabel": "Link Label",
     "links": "Links",
     "linksTooltip": "Links will automatically collapse if the viewport is too narrow",
+    "linkStyles": "Link Styles",
     "linkTarget": "Link Target",
     "linkType": "Link Type",
     "listLength": "List Length",
diff --git a/packages/visual-editor/locales/platform/es/visual-editor.json b/packages/visual-editor/locales/platform/es/visual-editor.json
index ca12e09cc..7084cfd12 100644
--- a/packages/visual-editor/locales/platform/es/visual-editor.json
+++ b/packages/visual-editor/locales/platform/es/visual-editor.json
@@ -186,6 +186,7 @@
     "browText": "Texto de cejas",
     "businessLogo": "Logotipo comercial",
     "buttons": "Botones",
+    "buttonStyles": "Estilos de botones",
     "buttonText": "Texto del botón",
     "cardTitleColor": "Color del título de la tarjeta",
     "cardVariant": "Variante de tarjeta",
@@ -280,6 +281,7 @@
     "linkLabel": "Etiqueta de enlace",
     "links": "Campo de golf",
     "linksTooltip": "Los enlaces se colapsarán automáticamente si la ventana gráfica es demasiado estrecha",
+    "linkStyles": "Estilos de enlace",
     "linkTarget": "Destino del enlace",
     "linkType": "Tipo de enlace",
     "listLength": "Longitud de la lista",
diff --git a/packages/visual-editor/locales/platform/et/visual-editor.json b/packages/visual-editor/locales/platform/et/visual-editor.json
index 378e954c7..74a1d8bc7 100644
--- a/packages/visual-editor/locales/platform/et/visual-editor.json
+++ b/packages/visual-editor/locales/platform/et/visual-editor.json
@@ -186,6 +186,7 @@
     "browText": "Kulmu tekst",
     "businessLogo": "Ärilogo",
     "buttons": "Nupud",
+    "buttonStyles": "Nuppude stiilid",
     "buttonText": "Nupu tekst",
     "cardTitleColor": "Kaardi pealkirja värv",
     "cardVariant": "Kaardi variant",
@@ -280,6 +281,7 @@
     "linkLabel": "Lingi silt",
     "links": "Lingid",
     "linksTooltip": "Lingid ahenevad automaatselt, kui vaateava on liiga kitsas",
+    "linkStyles": "Linkide stiilid",
     "linkTarget": "Lingi sihtmärk",
     "linkType": "Lingi tüüp",
     "listLength": "Nimekirja pikkus",
diff --git a/packages/visual-editor/locales/platform/fi/visual-editor.json b/packages/visual-editor/locales/platform/fi/visual-editor.json
index e5ebec6ac..b0595a6b3 100644
--- a/packages/visual-editor/locales/platform/fi/visual-editor.json
+++ b/packages/visual-editor/locales/platform/fi/visual-editor.json
@@ -186,6 +186,7 @@
     "browText": "Kulmien teksti",
     "businessLogo": "Liikealue",
     "buttons": "Painikkeet",
+    "buttonStyles": "Painikkeiden tyylit",
     "buttonText": "Painikkeen teksti",
     "cardTitleColor": "Kortin otsikon väri",
     "cardVariant": "Kortin variantti",
@@ -280,6 +281,7 @@
     "linkLabel": "Linkin etiketti",
     "links": "Linkit",
     "linksTooltip": "Linkit kutistuvat automaattisesti, jos näkymä on liian kapea",
+    "linkStyles": "Linkkien tyylit",
     "linkTarget": "Linkki kohde",
     "linkType": "Linkkityyppi",
     "listLength": "Listata pituus",
diff --git a/packages/visual-editor/locales/platform/fr/visual-editor.json b/packages/visual-editor/locales/platform/fr/visual-editor.json
index 6fc35bbdf..fc3e5a6ab 100644
--- a/packages/visual-editor/locales/platform/fr/visual-editor.json
+++ b/packages/visual-editor/locales/platform/fr/visual-editor.json
@@ -186,6 +186,7 @@
     "browText": "Texte des sourcils",
     "businessLogo": "Logo d'entreprise",
     "buttons": "Boutons",
+    "buttonStyles": "Styles de boutons",
     "buttonText": "Texte du bouton",
     "cardTitleColor": "Couleur du titre de la carte",
     "cardVariant": "Variante de carte",
@@ -280,6 +281,7 @@
     "linkLabel": "Libellé du lien",
     "links": "Links",
     "linksTooltip": "Les liens s'effondreront automatiquement si la fenêtre d'affichage est trop étroite",
+    "linkStyles": "Styles de liens",
     "linkTarget": "Cible du lien",
     "linkType": "Type de lien",
     "listLength": "Longueur de liste",
diff --git a/packages/visual-editor/locales/platform/hr/visual-editor.json b/packages/visual-editor/locales/platform/hr/visual-editor.json
index 8bbc4ac0a..15975a5a3 100644
--- a/packages/visual-editor/locales/platform/hr/visual-editor.json
+++ b/packages/visual-editor/locales/platform/hr/visual-editor.json
@@ -186,6 +186,7 @@
     "browText": "Tekst obrva",
     "businessLogo": "Poslovni logotip",
     "buttons": "Gumbi",
+    "buttonStyles": "Stilovi gumba",
     "buttonText": "Tekst gumba",
     "cardTitleColor": "Boja naslova kartice",
     "cardVariant": "Varijanta kartice",
@@ -280,6 +281,7 @@
     "linkLabel": "Oznaka veze",
     "links": "Veze",
     "linksTooltip": "Veze će se automatski skupiti ako je okvir za prikaz preuzak",
+    "linkStyles": "Stilovi veza",
     "linkTarget": "Odredište",
     "linkType": "Vrsta veze",
     "listLength": "Dužina popisa",
diff --git a/packages/visual-editor/locales/platform/hu/visual-editor.json b/packages/visual-editor/locales/platform/hu/visual-editor.json
index ff56f32e2..ccbe80a62 100644
--- a/packages/visual-editor/locales/platform/hu/visual-editor.json
+++ b/packages/visual-editor/locales/platform/hu/visual-editor.json
@@ -186,6 +186,7 @@
     "browText": "Brow Text",
     "businessLogo": "Üzleti logó",
     "buttons": "Gombok",
+    "buttonStyles": "Gombstílusok",
     "buttonText": "Gomb szövege",
     "cardTitleColor": "Kártya cím színe",
     "cardVariant": "Kártya változat",
@@ -280,6 +281,7 @@
     "linkLabel": "Link címke",
     "links": "Linkek",
     "linksTooltip": "A hivatkozások automatikusan összecsukódnak, ha a nézetablak túl keskeny",
+    "linkStyles": "Linkstílusok",
     "linkTarget": "cél",
     "linkType": "Linktípus",
     "listLength": "Lista hossza",
diff --git a/packages/visual-editor/locales/platform/it/visual-editor.json b/packages/visual-editor/locales/platform/it/visual-editor.json
index 5edd9106d..7193de743 100644
--- a/packages/visual-editor/locales/platform/it/visual-editor.json
+++ b/packages/visual-editor/locales/platform/it/visual-editor.json
@@ -186,6 +186,7 @@
     "browText": "Testo sulla fronte",
     "businessLogo": "Logo aziendale",
     "buttons": "Pulsanti",
+    "buttonStyles": "Stili dei pulsanti",
     "buttonText": "Testo del pulsante",
     "cardTitleColor": "Colore del titolo della carta",
     "cardVariant": "Variante della carta",
@@ -280,6 +281,7 @@
     "linkLabel": "Etichetta di collegamento",
     "links": "Link",
     "linksTooltip": "I collegamenti verranno compressi automaticamente se la finestra è troppo stretta",
+    "linkStyles": "Stili di collegamento",
     "linkTarget": "Obiettivo del collegamento",
     "linkType": "Tipo di collegamento",
     "listLength": "Lunghezza dell'elenco",
diff --git a/packages/visual-editor/locales/platform/ja/visual-editor.json b/packages/visual-editor/locales/platform/ja/visual-editor.json
index 8e4999861..ed72278b4 100644
--- a/packages/visual-editor/locales/platform/ja/visual-editor.json
+++ b/packages/visual-editor/locales/platform/ja/visual-editor.json
@@ -186,6 +186,7 @@
     "browText": "眉テキスト",
     "businessLogo": "ビジネスロゴ",
     "buttons": "ボタン",
+    "buttonStyles": "ボタンのスタイル",
     "buttonText": "ボタンのテキスト",
     "cardTitleColor": "カードタイトルの色",
     "cardVariant": "カードのバリエーション",
@@ -280,6 +281,7 @@
     "linkLabel": "リンクラベル",
     "links": "リンク",
     "linksTooltip": "ビューポートが狭すぎる場合、リンクは自動的に折りたたまれます",
+    "linkStyles": "リンクスタイル",
     "linkTarget": "リンクターゲット",
     "linkType": "リンクタイプ",
     "listLength": "リストの長さ",
diff --git a/packages/visual-editor/locales/platform/lt/visual-editor.json b/packages/visual-editor/locales/platform/lt/visual-editor.json
index 22422aab4..a4118e580 100644
--- a/packages/visual-editor/locales/platform/lt/visual-editor.json
+++ b/packages/visual-editor/locales/platform/lt/visual-editor.json
@@ -186,6 +186,7 @@
     "browText": "Antakių tekstas",
     "businessLogo": "Verslo logotipas",
     "buttons": "Mygtukai",
+    "buttonStyles": "Mygtukų stiliai",
     "buttonText": "Mygtuko tekstas",
     "cardTitleColor": "Kortelės pavadinimo spalva",
     "cardVariant": "Kortelės variantas",
@@ -280,6 +281,7 @@
     "linkLabel": "Nuorodos etiketė",
     "links": "Nuorodos",
     "linksTooltip": "Jei peržiūros sritis per siaura, nuorodos bus automatiškai sutrauktos",
+    "linkStyles": "Nuorodų stiliai",
     "linkTarget": "Nuoroda Tikslas",
     "linkType": "Nuorodos tipas",
     "listLength": "Sąrašo ilgis",
diff --git a/packages/visual-editor/locales/platform/lv/visual-editor.json b/packages/visual-editor/locales/platform/lv/visual-editor.json
index d833d721f..f75290c16 100644
--- a/packages/visual-editor/locales/platform/lv/visual-editor.json
+++ b/packages/visual-editor/locales/platform/lv/visual-editor.json
@@ -186,6 +186,7 @@
     "browText": "Uzacu teksts",
     "businessLogo": "Biznesa logotips",
     "buttons": "Pogas",
+    "buttonStyles": "Pogu stili",
     "buttonText": "Pogas teksts",
     "cardTitleColor": "Kartes nosaukuma krāsa",
     "cardVariant": "Kartes variants",
@@ -280,6 +281,7 @@
     "linkLabel": "Saites etiķete",
     "links": "Saites",
     "linksTooltip": "Ja skata logs ir pārāk šaurs, saites tiks automātiski sakļautas",
+    "linkStyles": "Saišu stili",
     "linkTarget": "Saites mērķis",
     "linkType": "Saites tips",
     "listLength": "Saraksta garums",
diff --git a/packages/visual-editor/locales/platform/nb/visual-editor.json b/packages/visual-editor/locales/platform/nb/visual-editor.json
index a622e34fa..2bd31dcc0 100644
--- a/packages/visual-editor/locales/platform/nb/visual-editor.json
+++ b/packages/visual-editor/locales/platform/nb/visual-editor.json
@@ -186,6 +186,7 @@
     "browText": "Bryntekst",
     "businessLogo": "Forretningslogo",
     "buttons": "Knapper",
+    "buttonStyles": "Knappestiler",
     "buttonText": "Knappetekst",
     "cardTitleColor": "Korttittelfarge",
     "cardVariant": "Kortvariant",
@@ -280,6 +281,7 @@
     "linkLabel": "Koblingsetikett",
     "links": "Lenker",
     "linksTooltip": "Lenker vil automatisk kollapse hvis visningsporten er for smal",
+    "linkStyles": "Lenkestiler",
     "linkTarget": "Linkmål",
     "linkType": "Koblingstype",
     "listLength": "Listelengde",
diff --git a/packages/visual-editor/locales/platform/nl/visual-editor.json b/packages/visual-editor/locales/platform/nl/visual-editor.json
index ef16461f8..a5d984e6e 100644
--- a/packages/visual-editor/locales/platform/nl/visual-editor.json
+++ b/packages/visual-editor/locales/platform/nl/visual-editor.json
@@ -186,6 +186,7 @@
     "browText": "Wenkbrauwtekst",
     "businessLogo": "Bedrijfslogo",
     "buttons": "Knoppen",
+    "buttonStyles": "Knopstijlen",
     "buttonText": "Knoptekst",
     "cardTitleColor": "Kleur kaarttitel",
     "cardVariant": "Kaartvariant",
@@ -280,6 +281,7 @@
     "linkLabel": "Linklabel",
     "links": "Links",
     "linksTooltip": "Links worden automatisch samengevouwen als de viewport te smal is",
+    "linkStyles": "Linkstijlen",
     "linkTarget": "Doel koppelen",
     "linkType": "Linktype",
     "listLength": "Maak een lijst van lengte",
diff --git a/packages/visual-editor/locales/platform/pl/visual-editor.json b/packages/visual-editor/locales/platform/pl/visual-editor.json
index 79aa71dce..09ad856d6 100644
--- a/packages/visual-editor/locales/platform/pl/visual-editor.json
+++ b/packages/visual-editor/locales/platform/pl/visual-editor.json
@@ -186,6 +186,7 @@
     "browText": "Tekst brwi",
     "businessLogo": "Logo biznesowe",
     "buttons": "Pikolak",
+    "buttonStyles": "Style przycisków",
     "buttonText": "Tekst przycisku",
     "cardTitleColor": "Kolor tytułu karty",
     "cardVariant": "Wariant karty",
@@ -280,6 +281,7 @@
     "linkLabel": "Etykieta łącza",
     "links": "Spinki do mankietów",
     "linksTooltip": "Łącza zostaną automatycznie zwinięte, jeśli rzutnia jest zbyt wąska",
+    "linkStyles": "Style łączy",
     "linkTarget": "Cel łącza",
     "linkType": "Typ linku",
     "listLength": "Długość listy",
diff --git a/packages/visual-editor/locales/platform/pt/visual-editor.json b/packages/visual-editor/locales/platform/pt/visual-editor.json
index f428b54fa..0fec3a5cb 100644
--- a/packages/visual-editor/locales/platform/pt/visual-editor.json
+++ b/packages/visual-editor/locales/platform/pt/visual-editor.json
@@ -186,6 +186,7 @@
     "browText": "Texto da sobrancelha",
     "businessLogo": "Logotipo de negócios",
     "buttons": "Botões",
+    "buttonStyles": "Estilos de botão",
     "buttonText": "Texto do botão",
     "cardTitleColor": "Cor do título do cartão",
     "cardVariant": "Variante de cartão",
@@ -280,6 +281,7 @@
     "linkLabel": "Etiqueta do link",
     "links": "Links",
     "linksTooltip": "Os links serão recolhidos automaticamente se a janela de visualização for muito estreita",
+    "linkStyles": "Estilos de link",
     "linkTarget": "Alvo do link",
     "linkType": "Tipo de link",
     "listLength": "Comprimento da lista",
diff --git a/packages/visual-editor/locales/platform/ro/visual-editor.json b/packages/visual-editor/locales/platform/ro/visual-editor.json
index 8aaec88e3..69801a60e 100644
--- a/packages/visual-editor/locales/platform/ro/visual-editor.json
+++ b/packages/visual-editor/locales/platform/ro/visual-editor.json
@@ -186,6 +186,7 @@
     "browText": "Textul sprâncenelor",
     "businessLogo": "Logo -ul de afaceri",
     "buttons": "Butoane",
+    "buttonStyles": "Stiluri de butoane",
     "buttonText": "Text buton",
     "cardTitleColor": "Culoarea titlului cardului",
     "cardVariant": "Varianta card",
@@ -280,6 +281,7 @@
     "linkLabel": "Etichetă de link",
     "links": "Link -uri",
     "linksTooltip": "Linkurile se vor restrânge automat dacă fereastra de vizualizare este prea îngustă",
+    "linkStyles": "Stiluri de link",
     "linkTarget": "Link țintă",
     "linkType": "Tip de legătură",
     "listLength": "Lungimea listei",
diff --git a/packages/visual-editor/locales/platform/sk/visual-editor.json b/packages/visual-editor/locales/platform/sk/visual-editor.json
index 28dd9477a..a32804199 100644
--- a/packages/visual-editor/locales/platform/sk/visual-editor.json
+++ b/packages/visual-editor/locales/platform/sk/visual-editor.json
@@ -186,6 +186,7 @@
     "browText": "Text na obočie",
     "businessLogo": "Obchodné logo",
     "buttons": "Gombíky",
+    "buttonStyles": "Štýly tlačidiel",
     "buttonText": "Text tlačidla",
     "cardTitleColor": "Farba názvu karty",
     "cardVariant": "Variant karty",
@@ -280,6 +281,7 @@
     "linkLabel": "Označenie odkazu",
     "links": "Odkazy",
     "linksTooltip": "Ak je výrez príliš úzky, prepojenia sa automaticky zbalia",
+    "linkStyles": "Štýly odkazov",
     "linkTarget": "Cieľ odkazu",
     "linkType": "Typ odkazu",
     "listLength": "Dĺžka zoznamu",
diff --git a/packages/visual-editor/locales/platform/sv/visual-editor.json b/packages/visual-editor/locales/platform/sv/visual-editor.json
index 530a4adfd..b24b91227 100644
--- a/packages/visual-editor/locales/platform/sv/visual-editor.json
+++ b/packages/visual-editor/locales/platform/sv/visual-editor.json
@@ -186,6 +186,7 @@
     "browText": "Brow Text",
     "businessLogo": "Affärslogotyp",
     "buttons": "Knappar",
+    "buttonStyles": "Knappstilar",
     "buttonText": "Knapptext",
     "cardTitleColor": "Kortets titelfärg",
     "cardVariant": "Kortvariant",
@@ -280,6 +281,7 @@
     "linkLabel": "Länketikett",
     "links": "Länkar",
     "linksTooltip": "Länkar kommer automatiskt att kollapsa om visningsporten är för smal",
+    "linkStyles": "Länkstilar",
     "linkTarget": "Länkmål",
     "linkType": "Länktyp",
     "listLength": "Listlängd",
diff --git a/packages/visual-editor/locales/platform/tr/visual-editor.json b/packages/visual-editor/locales/platform/tr/visual-editor.json
index f83214b0f..1fc12e521 100644
--- a/packages/visual-editor/locales/platform/tr/visual-editor.json
+++ b/packages/visual-editor/locales/platform/tr/visual-editor.json
@@ -186,6 +186,7 @@
     "browText": "Kaş Metni",
     "businessLogo": "İş logosu",
     "buttons": "Düğmeler",
+    "buttonStyles": "Düğme Stilleri",
     "buttonText": "Düğme Metni",
     "cardTitleColor": "Kart Başlığı Rengi",
     "cardVariant": "Kart Varyantı",
@@ -280,6 +281,7 @@
     "linkLabel": "Bağlantı Etiketi",
     "links": "Bağlar",
     "linksTooltip": "Görünüm çok darsa bağlantılar otomatik olarak daraltılır",
+    "linkStyles": "Bağlantı Stilleri",
     "linkTarget": "Bağlantı Hedefi",
     "linkType": "Bağlantı türü",
     "listLength": "Liste uzunluğu",
diff --git a/packages/visual-editor/locales/platform/zh-TW/visual-editor.json b/packages/visual-editor/locales/platform/zh-TW/visual-editor.json
index 7acd81504..0ae0ab8d7 100644
--- a/packages/visual-editor/locales/platform/zh-TW/visual-editor.json
+++ b/packages/visual-editor/locales/platform/zh-TW/visual-editor.json
@@ -186,6 +186,7 @@
     "browText": "眉毛文字",
     "businessLogo": "業務徽標",
     "buttons": "按鈕",
+    "buttonStyles": "按鈕樣式",
     "buttonText": "按鈕文字",
     "cardTitleColor": "卡片標題顏色",
     "cardVariant": "卡牌變體",
@@ -280,6 +281,7 @@
     "linkLabel": "鏈接標籤",
     "links": "鏈接",
     "linksTooltip": "如果視口太窄，鏈接將自動折疊",
+    "linkStyles": "連結樣式",
     "linkTarget": "鏈接目標",
     "linkType": "鏈接類型",
     "listLength": "列表長度",
diff --git a/packages/visual-editor/locales/platform/zh/visual-editor.json b/packages/visual-editor/locales/platform/zh/visual-editor.json
index 4131c29b0..a7234fc92 100644
--- a/packages/visual-editor/locales/platform/zh/visual-editor.json
+++ b/packages/visual-editor/locales/platform/zh/visual-editor.json
@@ -186,6 +186,7 @@
     "browText": "眉毛文字",
     "businessLogo": "业务徽标",
     "buttons": "按钮",
+    "buttonStyles": "按钮样式",
     "buttonText": "按钮文字",
     "cardTitleColor": "卡片标题颜色",
     "cardVariant": "卡片变体",
@@ -280,6 +281,7 @@
     "linkLabel": "链接标签",
     "links": "链接",
     "linksTooltip": "如果视口太窄，链接将自动折叠",
+    "linkStyles": "链接样式",
     "linkTarget": "链接目标",
     "linkType": "链接类型",
     "listLength": "列表长度",
diff --git a/packages/visual-editor/src/components/atoms/cta.tsx b/packages/visual-editor/src/components/atoms/cta.tsx
index 2b26d3026..e13deaace 100644
--- a/packages/visual-editor/src/components/atoms/cta.tsx
+++ b/packages/visual-editor/src/components/atoms/cta.tsx
@@ -33,7 +33,7 @@ export type CTAProps = {
   // ctaType specific props
   link?: string;
   linkType?: LinkType;
-  normalizeLink: boolean;
+  normalizeLink?: boolean;
   presetImageType?: PresetImageType;
 
   // button actionType specific props
@@ -43,6 +43,7 @@ export type CTAProps = {
   // Styling and behavior props
   variant?: ButtonProps["variant"];
   className?: string;
+  style?: React.CSSProperties;
   eventName?: string;
   target?: "_self" | "_blank" | "_parent" | "_top";
   alwaysHideCaret?: boolean;
@@ -112,7 +113,7 @@ const useResolvedCtaProps = (props: CTAProps) => {
     className,
     alwaysHideCaret,
     ariaLabel,
-    normalizeLink: shouldNormalizeLink,
+    normalizeLink: shouldNormalizeLink = true,
   } = props;
   const { t } = useTranslation();
   const streamDocument = useDocument();
@@ -237,6 +238,7 @@ export const CTA = (props: CTAProps) => {
     eventName,
     target,
     variant,
+    style,
     ctaType,
     onClick,
     disabled = false,
@@ -381,6 +383,7 @@ export const CTA = (props: CTAProps) => {
           textTransform: buttonVariant?.toLowerCase().includes("link")
             ? LINK_TEXT_TRANSFORM_CSS_VAR
             : BUTTON_TEXT_TRANSFORM_CSS_VAR,
+          ...style,
         }}
       >
         {linkContent}
@@ -409,6 +412,7 @@ export const CTA = (props: CTAProps) => {
           textTransform: buttonVariant?.toLowerCase().includes("link")
             ? LINK_TEXT_TRANSFORM_CSS_VAR
             : BUTTON_TEXT_TRANSFORM_CSS_VAR,
+          ...style,
         }}
         className={buttonClassName}
         variant={buttonVariant}
@@ -424,7 +428,10 @@ export const CTA = (props: CTAProps) => {
 
   return (
     <Button
-      style={ctaType !== "presetImage" ? dynamicStyle : undefined}
+      style={{
+        ...(ctaType !== "presetImage" ? dynamicStyle : undefined),
+        ...style,
+      }}
       asChild
       className={buttonClassName}
       variant={buttonVariant}
@@ -444,6 +451,7 @@ export const CTA = (props: CTAProps) => {
           textTransform: buttonVariant?.toLowerCase().includes("link")
             ? LINK_TEXT_TRANSFORM_CSS_VAR
             : BUTTON_TEXT_TRANSFORM_CSS_VAR,
+          ...style,
         }}
       >
         {linkContent}
diff --git a/packages/visual-editor/src/components/contentBlocks/ComprehensiveCTA.tsx b/packages/visual-editor/src/components/contentBlocks/ComprehensiveCTA.tsx
new file mode 100644
index 000000000..2f9804519
--- /dev/null
+++ b/packages/visual-editor/src/components/contentBlocks/ComprehensiveCTA.tsx
@@ -0,0 +1,325 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { type CTAProps, CTA } from "../atoms/cta.tsx";
+import { themeManagerCn } from "../../utils/cn.ts";
+import { useDocument } from "../../hooks/useDocument.tsx";
+import { resolveComponentData } from "../../utils/resolveComponentData.tsx";
+import { getCTAType } from "../../internal/utils/ctaFieldUtils.ts";
+import { type ComprehensiveCTAValue } from "../../fields/styledFields/ComprehensiveCTAField.tsx";
+import {
+  FOOD_DELIVERY_SERVICES,
+  type EnhancedTranslatableCTA,
+} from "../../types/types.ts";
+import { type StyledButtonValue } from "../../fields/styledFields/StyledButtonField.tsx";
+import { type StyledLinkValue } from "../../fields/styledFields/StyledLinkField.tsx";
+import { defaultBaseTextStyles } from "../../fields/styledFields/baseText.tsx";
+
+export type ComprehensiveCTARenderProps = {
+  value?: Partial<ComprehensiveCTAValue>;
+  label?: React.ReactNode;
+  ariaLabel?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  eventName?: string;
+  target?: CTAProps["target"];
+  alwaysHideCaret?: boolean;
+  onClick?: CTAProps["onClick"];
+};
+
+const defaultButtonStyleValue: StyledButtonValue = {
+  ...defaultBaseTextStyles,
+  borderRadius: "default",
+  letterSpacing: "default",
+};
+
+const defaultLinkStyleValue: StyledLinkValue = {
+  ...defaultBaseTextStyles,
+  letterSpacing: "default",
+  includeCaret: "default",
+};
+
+const defaultComprehensiveCTAValue: ComprehensiveCTAValue = {
+  data: {
+    actionType: "link",
+    cta: {
+      field: "",
+      constantValueEnabled: true,
+      constantValue: {
+        ctaType: "textAndLink",
+        label: { defaultValue: "Call to Action" },
+        link: { defaultValue: "#" },
+        linkType: "URL",
+      },
+      selectedType: "textAndLink",
+    },
+    openInNewTab: false,
+    buttonText: { defaultValue: "Button" },
+    customId: "",
+    customClass: "",
+    dataAttributes: [],
+    ariaLabel: { defaultValue: "Button" },
+  },
+  styles: {
+    variant: "primary",
+    presetImage: "app-store",
+    button: defaultButtonStyleValue,
+    link: defaultLinkStyleValue,
+  },
+};
+
+const normalizeComprehensiveCTAValue = (
+  value?: Partial<ComprehensiveCTAValue>
+): ComprehensiveCTAValue => ({
+  ...defaultComprehensiveCTAValue,
+  ...value,
+  data: {
+    ...defaultComprehensiveCTAValue.data,
+    ...value?.data,
+    cta: {
+      ...defaultComprehensiveCTAValue.data.cta,
+      ...value?.data?.cta,
+      constantValue: {
+        ...defaultComprehensiveCTAValue.data.cta.constantValue,
+        ...value?.data?.cta?.constantValue,
+      },
+    },
+  },
+  styles: {
+    ...defaultComprehensiveCTAValue.styles,
+    ...value?.styles,
+    button: {
+      ...defaultButtonStyleValue,
+      ...value?.styles?.button,
+    },
+    link: {
+      ...defaultLinkStyleValue,
+      ...value?.styles?.link,
+    },
+  },
+});
+
+const resolveTextStyleValue = (value: string | undefined) =>
+  value && value !== "default" ? value : undefined;
+
+const getComprehensiveCTAStyle = (
+  value: ComprehensiveCTAValue
+): React.CSSProperties | undefined => {
+  const ctaType =
+    value.data.actionType === "button"
+      ? "textAndLink"
+      : getCTAType(value.data.cta).ctaType;
+
+  if (ctaType === "presetImage") {
+    return value.sx;
+  }
+
+  const typographyStyles: StyledButtonValue | StyledLinkValue =
+    value.styles.variant === "link"
+      ? (value.styles.link ?? value.styles.button ?? defaultLinkStyleValue)
+      : (value.styles.button ?? defaultButtonStyleValue);
+
+  const style: React.CSSProperties & {
+    "--display-link-caret"?: string;
+  } = {
+    ...value.sx,
+  };
+
+  const fontFamily = resolveTextStyleValue(typographyStyles.fontFamily);
+  const fontSize = resolveTextStyleValue(typographyStyles.fontSize);
+  const fontWeight = resolveTextStyleValue(typographyStyles.fontWeight);
+  const fontStyle = resolveTextStyleValue(typographyStyles.fontStyle);
+  const textTransform = resolveTextStyleValue(typographyStyles.textTransform);
+  const letterSpacing = resolveTextStyleValue(typographyStyles.letterSpacing);
+
+  if (fontFamily) {
+    style.fontFamily = fontFamily;
+  }
+  if (fontSize) {
+    style.fontSize = fontSize;
+  }
+  if (fontWeight) {
+    style.fontWeight = fontWeight;
+  }
+  if (fontStyle) {
+    style.fontStyle = fontStyle as React.CSSProperties["fontStyle"];
+  }
+  if (textTransform) {
+    style.textTransform = textTransform as React.CSSProperties["textTransform"];
+  }
+  if (letterSpacing) {
+    style.letterSpacing = letterSpacing;
+  }
+
+  if ("borderRadius" in typographyStyles) {
+    const borderRadius = resolveTextStyleValue(typographyStyles.borderRadius);
+    if (borderRadius) {
+      style.borderRadius = borderRadius;
+    }
+  }
+
+  if ("includeCaret" in typographyStyles) {
+    const includeCaret = resolveTextStyleValue(typographyStyles.includeCaret);
+    if (includeCaret) {
+      style["--display-link-caret"] = includeCaret;
+    }
+  }
+
+  return Object.keys(style).length ? style : undefined;
+};
+
+const toDataAttributes = (
+  dataAttributes: ComprehensiveCTAValue["data"]["dataAttributes"]
+) => {
+  if (!dataAttributes?.length) {
+    return undefined;
+  }
+
+  return dataAttributes.reduce(
+    (acc, { key, value }) => {
+      const trimmedKey = key?.trim();
+      if (!trimmedKey) {
+        return acc;
+      }
+
+      const normalizedKey = trimmedKey.startsWith("data-")
+        ? trimmedKey
+        : `data-${trimmedKey}`;
+      acc[normalizedKey as `data-${string}`] = value ?? "";
+      return acc;
+    },
+    {} as Record<`data-${string}`, string>
+  );
+};
+
+export const ComprehensiveCTA = ({
+  value,
+  label,
+  ariaLabel,
+  className,
+  style,
+  eventName,
+  target,
+  alwaysHideCaret,
+  onClick,
+}: ComprehensiveCTARenderProps) => {
+  const streamDocument = useDocument();
+  const { t, i18n } = useTranslation();
+  const locale = i18n.language;
+  const currentValue = normalizeComprehensiveCTAValue(value);
+
+  const actionType = currentValue.data.actionType;
+  const { ctaType } =
+    actionType === "link"
+      ? getCTAType(currentValue.data.cta)
+      : { ctaType: "textAndLink" as const };
+  const resolvedCta =
+    actionType === "link"
+      ? (resolveComponentData(currentValue.data.cta, locale, streamDocument) as
+          | EnhancedTranslatableCTA
+          | undefined)
+      : undefined;
+
+  const resolvedButtonLabel = currentValue.data.buttonText
+    ? resolveComponentData(currentValue.data.buttonText, locale, streamDocument)
+    : "";
+  const resolvedFieldAriaLabel = currentValue.data.ariaLabel
+    ? resolveComponentData(currentValue.data.ariaLabel, locale, streamDocument)
+    : "";
+
+  let resolvedLinkLabel =
+    resolvedCta &&
+    resolveComponentData(resolvedCta.label, locale, streamDocument);
+
+  if (
+    actionType === "link" &&
+    !currentValue.data.cta.constantValueEnabled &&
+    ctaType === "getDirections"
+  ) {
+    resolvedLinkLabel = t("getDirections", "Get Directions");
+  }
+
+  const effectiveLabel =
+    label !== undefined
+      ? label
+      : actionType === "button"
+        ? resolvedButtonLabel
+        : resolvedLinkLabel;
+
+  const showCTA =
+    label !== undefined
+      ? label !== null && label !== false
+      : actionType === "button"
+        ? Boolean(resolvedButtonLabel?.trim())
+        : Boolean(
+            resolvedCta && (ctaType === "presetImage" || resolvedLinkLabel)
+          );
+
+  if (!showCTA) {
+    return null;
+  }
+
+  const resolvedClassName = themeManagerCn(
+    currentValue.className,
+    actionType === "link" &&
+      ctaType === "presetImage" &&
+      currentValue.styles.presetImage &&
+      (FOOD_DELIVERY_SERVICES as readonly string[]).includes(
+        currentValue.styles.presetImage
+      )
+      ? "!justify-start"
+      : undefined,
+    actionType === "button" ? currentValue.data.customClass : undefined,
+    className
+  );
+
+  const resolvedStyle = {
+    ...getComprehensiveCTAStyle(currentValue),
+    ...style,
+  };
+
+  const resolvedAriaLabel =
+    ariaLabel ??
+    (actionType === "button"
+      ? resolvedFieldAriaLabel || undefined
+      : typeof effectiveLabel === "string"
+        ? effectiveLabel
+        : undefined);
+
+  return (
+    <CTA
+      actionType={actionType}
+      ariaLabel={resolvedAriaLabel}
+      alwaysHideCaret={alwaysHideCaret}
+      className={resolvedClassName}
+      color={currentValue.styles.color}
+      ctaType={ctaType}
+      dataAttributes={
+        actionType === "button"
+          ? toDataAttributes(currentValue.data.dataAttributes)
+          : undefined
+      }
+      eventName={eventName ?? currentValue.eventName}
+      id={actionType === "button" ? currentValue.data.customId : undefined}
+      label={effectiveLabel}
+      link={
+        actionType === "link" && resolvedCta
+          ? resolveComponentData(resolvedCta.link, locale, streamDocument)
+          : undefined
+      }
+      linkType={
+        actionType === "link" && resolvedCta ? resolvedCta.linkType : undefined
+      }
+      onClick={onClick}
+      openInNewTab={
+        actionType === "link" ? currentValue.data.openInNewTab : undefined
+      }
+      presetImageType={
+        actionType === "link" ? currentValue.styles.presetImage : undefined
+      }
+      setPadding={true}
+      style={resolvedStyle}
+      target={target}
+      variant={currentValue.styles.variant}
+    />
+  );
+};
diff --git a/packages/visual-editor/src/components/contentBlocks/index.ts b/packages/visual-editor/src/components/contentBlocks/index.ts
index c9199b694..be636af25 100644
--- a/packages/visual-editor/src/components/contentBlocks/index.ts
+++ b/packages/visual-editor/src/components/contentBlocks/index.ts
@@ -1,5 +1,9 @@
 export { Address, type AddressProps } from "./Address.tsx";
 export { BodyText, type BodyTextProps } from "./BodyText.tsx";
+export {
+  ComprehensiveCTA,
+  type ComprehensiveCTARenderProps as ComprehensiveCTAProps,
+} from "./ComprehensiveCTA.tsx";
 export { CTAGroup, type CTAGroupProps } from "./CTAGroup.tsx";
 export { CTAWrapper, type CTAWrapperProps } from "./CtaWrapper.tsx";
 export { Emails, type EmailsProps } from "./Emails.tsx";
diff --git a/packages/visual-editor/src/components/testing/screenshots/Locator/[tablet] latest version default props.png b/packages/visual-editor/src/components/testing/screenshots/Locator/[tablet] latest version default props.png
index ffd6d13ed..40a6a4579 100644
Binary files a/packages/visual-editor/src/components/testing/screenshots/Locator/[tablet] latest version default props.png and b/packages/visual-editor/src/components/testing/screenshots/Locator/[tablet] latest version default props.png differ
diff --git a/packages/visual-editor/src/fields/fieldOverrides.ts b/packages/visual-editor/src/fields/fieldOverrides.ts
index 4e048a054..1be1b5679 100644
--- a/packages/visual-editor/src/fields/fieldOverrides.ts
+++ b/packages/visual-editor/src/fields/fieldOverrides.ts
@@ -4,6 +4,7 @@ import { DateTimeSelectorFieldOverride } from "./DateTimeSelectorField.tsx";
 import { EntityFieldSelectorFieldOverride } from "./EntityFieldSelectorField.tsx";
 import { FontSizeSelectorFieldOverride } from "./FontSizeSelectorField.tsx";
 import { CTASelectorFieldOverride } from "./CTASelectorField.tsx";
+import { ComprehensiveCTAFieldOverride } from "./styledFields/ComprehensiveCTAField.tsx";
 import { MultiSelectorFieldOverride } from "./MultiSelectorField.tsx";
 import { OptionalNumberFieldOverride } from "./OptionalNumberField.tsx";
 import { ImageFieldOverride } from "./ImageField.tsx";
@@ -19,6 +20,7 @@ export const YextPuckFieldOverrides = {
   basicSelector: BasicSelectorFieldOverride,
   ctaSelector: CTASelectorFieldOverride,
   code: CodeFieldOverride,
+  comprehensiveCTA: ComprehensiveCTAFieldOverride,
   dateTimeSelector: DateTimeSelectorFieldOverride,
   entityField: EntityFieldSelectorFieldOverride,
   multiSelector: MultiSelectorFieldOverride,
diff --git a/packages/visual-editor/src/fields/fields.ts b/packages/visual-editor/src/fields/fields.ts
index f792c5c7b..ade15b537 100644
--- a/packages/visual-editor/src/fields/fields.ts
+++ b/packages/visual-editor/src/fields/fields.ts
@@ -17,6 +17,7 @@ import type { CTASelectorField } from "./CTASelectorField.tsx";
 import type { MultiSelectorField } from "./MultiSelectorField.tsx";
 import type { OptionalNumberField } from "./OptionalNumberField.tsx";
 import type { ImageField } from "./ImageField.tsx";
+import type { ComprehensiveCTAField } from "./styledFields/ComprehensiveCTAField.tsx";
 import type { StyledButtonField } from "./styledFields/StyledButtonField.tsx";
 import type { StyledImageField } from "./styledFields/StyledImageField.tsx";
 import type { StyledLinkField } from "./styledFields/StyledLinkField.tsx";
@@ -31,6 +32,7 @@ export type YextPuckFields = {
   basicSelector: BasicSelectorField;
   ctaSelector: CTASelectorField;
   code: CodeField;
+  comprehensiveCTA: ComprehensiveCTAField;
   dateTimeSelector: DateTimeSelectorField;
   entityField: EntityFieldSelectorField;
   multiSelector: MultiSelectorField;
diff --git a/packages/visual-editor/src/fields/styledFields/ComprehensiveCTAField.test.tsx b/packages/visual-editor/src/fields/styledFields/ComprehensiveCTAField.test.tsx
new file mode 100644
index 000000000..edd5fdbd9
--- /dev/null
+++ b/packages/visual-editor/src/fields/styledFields/ComprehensiveCTAField.test.tsx
@@ -0,0 +1,323 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+const puckState = {
+  appState: {
+    ui: {
+      itemSelector: null,
+    },
+  },
+  getItemBySelector: () => undefined,
+};
+
+vi.mock("@puckeditor/core", async () => {
+  const actual =
+    await vi.importActual<typeof import("@puckeditor/core")>(
+      "@puckeditor/core"
+    );
+
+  return {
+    ...actual,
+    createUsePuck: () => (selector: (state: typeof puckState) => unknown) =>
+      selector(puckState),
+  };
+});
+
+import { EntityFieldsContext } from "../../hooks/useEntityFields.tsx";
+import { TemplatePropsContext } from "../../hooks/useDocument.tsx";
+import { TemplateMetadataContext } from "../../internal/hooks/useMessageReceivers.ts";
+import { generateTemplateMetadata } from "../../internal/types/templateMetadata.ts";
+import { type StreamFields } from "../../types/entityFields.ts";
+import { YextAutoField } from "../YextAutoField.tsx";
+import {
+  type ComprehensiveCTAField,
+  type ComprehensiveCTAValue,
+} from "./ComprehensiveCTAField.tsx";
+import { type StyledButtonValue } from "./StyledButtonField.tsx";
+import { type StyledLinkValue } from "./StyledLinkField.tsx";
+
+const field: ComprehensiveCTAField = {
+  type: "comprehensiveCTA",
+  label: "Complete CTA",
+};
+
+const defaultEntityFields: StreamFields = {
+  fields: [
+    {
+      name: "c_primaryCTA",
+      definition: {
+        name: "c_primaryCTA",
+        typeName: "type.cta",
+        type: {},
+      },
+    },
+  ],
+  displayNames: {
+    c_primaryCTA: "Primary CTA",
+  },
+};
+
+type ComprehensiveCTAValueOverrides = Omit<
+  Partial<ComprehensiveCTAValue>,
+  "data" | "styles"
+> & {
+  data?: Partial<ComprehensiveCTAValue["data"]>;
+  styles?: Partial<Omit<ComprehensiveCTAValue["styles"], "button" | "link">> & {
+    button?: Partial<StyledButtonValue>;
+    link?: Partial<StyledLinkValue>;
+  };
+};
+
+const defaultButtonStyles: StyledButtonValue = {
+  fontFamily: "default",
+  fontSize: "default",
+  fontWeight: "default",
+  fontStyle: "default",
+  textTransform: "default",
+  borderRadius: "default",
+  letterSpacing: "default",
+};
+
+const defaultLinkStyles: StyledLinkValue = {
+  fontFamily: "default",
+  fontSize: "default",
+  fontWeight: "default",
+  fontStyle: "default",
+  textTransform: "default",
+  letterSpacing: "default",
+  includeCaret: "default",
+};
+
+const comprehensiveCTAValue = (
+  overrides: ComprehensiveCTAValueOverrides = {}
+): ComprehensiveCTAValue => {
+  const { styles: styleOverrides, ...restOverrides } = overrides;
+  const {
+    button: buttonOverrides,
+    link: linkOverrides,
+    ...otherStyleOverrides
+  } = styleOverrides ?? {};
+
+  return {
+    data: {
+      actionType: "link",
+      cta: {
+        field: "",
+        constantValueEnabled: true,
+        constantValue: {
+          ctaType: "textAndLink",
+          label: { defaultValue: "Learn More" },
+          link: { defaultValue: "#" },
+          linkType: "URL",
+        },
+        selectedType: "textAndLink",
+      },
+      openInNewTab: false,
+      buttonText: { defaultValue: "Button" },
+      customId: "",
+      customClass: "",
+      dataAttributes: [],
+      ariaLabel: { defaultValue: "Button" },
+      ...overrides.data,
+    },
+    styles: {
+      variant: "primary",
+      presetImage: "app-store",
+      color: undefined,
+      ...otherStyleOverrides,
+      button: { ...defaultButtonStyles, ...buttonOverrides },
+      link: { ...defaultLinkStyles, ...linkOverrides },
+    },
+    className: restOverrides.className,
+    sx: restOverrides.sx,
+    eventName: restOverrides.eventName,
+  };
+};
+
+const renderField = (
+  value: ComprehensiveCTAValue = comprehensiveCTAValue(),
+  entityFields: StreamFields | null = defaultEntityFields
+) => {
+  const onChange = vi.fn();
+  const templateMetadata = {
+    ...generateTemplateMetadata(),
+    entityTypeDisplayName: "Location",
+  };
+
+  render(
+    <TemplatePropsContext.Provider value={{ document: { locale: "en" } }}>
+      <TemplateMetadataContext.Provider value={templateMetadata}>
+        <EntityFieldsContext.Provider value={entityFields}>
+          <YextAutoField
+            field={field}
+            id="complete-cta"
+            onChange={onChange}
+            value={value}
+          />
+        </EntityFieldsContext.Provider>
+      </TemplateMetadataContext.Provider>
+    </TemplatePropsContext.Provider>
+  );
+
+  return { onChange };
+};
+
+describe("ComprehensiveCTAField", () => {
+  it("renders through YextAutoField as a registered field type", () => {
+    renderField();
+
+    expect(screen.getByText("Complete CTA")).toBeDefined();
+    expect(screen.getByText("Data")).toBeDefined();
+    expect(screen.getByText("Styles")).toBeDefined();
+    expect(screen.getByRole("combobox", { name: "CTA Type" })).toBeDefined();
+    expect(screen.getByRole("combobox", { name: "Link Type" })).toBeDefined();
+    expect(screen.getByText("Action Type")).toBeDefined();
+    expect(screen.getByRole("radio", { name: "Button" })).toBeDefined();
+    expect(screen.getByText("Button Styles")).toBeDefined();
+    expect(screen.queryByText("Normalize Link")).toBeNull();
+  });
+
+  it("shows button-only fields when action type is button", () => {
+    renderField(
+      comprehensiveCTAValue({
+        data: {
+          actionType: "button",
+          cta: {
+            field: "",
+            constantValueEnabled: true,
+            constantValue: {
+              ctaType: "textAndLink",
+              label: { defaultValue: "Learn More" },
+              link: { defaultValue: "#" },
+              linkType: "URL",
+            },
+            selectedType: "textAndLink",
+          },
+          openInNewTab: false,
+          buttonText: { defaultValue: "Button" },
+          customId: "cta-id",
+          customClass: "cta-class",
+          dataAttributes: [],
+          ariaLabel: { defaultValue: "Button Aria" },
+        },
+      })
+    );
+
+    expect(screen.queryByRole("combobox", { name: "CTA Type" })).toBeNull();
+    expect(screen.getByDisplayValue("cta-id")).toBeDefined();
+    expect(screen.getByDisplayValue("cta-class")).toBeDefined();
+    expect(screen.getByDisplayValue("Button Aria")).toBeDefined();
+    expect(screen.getByText("Button Styles")).toBeDefined();
+  });
+
+  it("shows preset image instead of variant for preset-image CTAs", () => {
+    renderField(
+      comprehensiveCTAValue({
+        data: {
+          actionType: "link",
+          cta: {
+            field: "",
+            constantValueEnabled: true,
+            constantValue: {
+              ctaType: "presetImage",
+              label: { defaultValue: "Download" },
+              link: { defaultValue: "#" },
+              linkType: "URL",
+            },
+            selectedType: "presetImage",
+          },
+          openInNewTab: false,
+          buttonText: { defaultValue: "Button" },
+          customId: "",
+          customClass: "",
+          dataAttributes: [],
+          ariaLabel: { defaultValue: "Button" },
+        },
+      })
+    );
+
+    expect(
+      screen.getByRole("combobox", { name: "Preset Image" })
+    ).toBeDefined();
+    expect(screen.queryByText("Button Styles")).toBeNull();
+    expect(screen.queryByText("Link Styles")).toBeNull();
+  });
+
+  it("shows link style controls when variant is link", () => {
+    renderField(
+      comprehensiveCTAValue({
+        styles: {
+          variant: "link",
+        },
+      })
+    );
+
+    expect(screen.getByText("Link Styles")).toBeDefined();
+    expect(screen.getByText("Include Caret")).toBeDefined();
+    expect(screen.queryByText("Button Styles")).toBeNull();
+  });
+
+  it("updates nested button data while preserving styles", () => {
+    const initialValue = comprehensiveCTAValue({
+      data: {
+        actionType: "button",
+        cta: {
+          field: "",
+          constantValueEnabled: true,
+          constantValue: {
+            ctaType: "textAndLink",
+            label: { defaultValue: "Learn More" },
+            link: { defaultValue: "#" },
+            linkType: "URL",
+          },
+          selectedType: "textAndLink",
+        },
+        openInNewTab: false,
+        buttonText: { defaultValue: "Button" },
+        customId: "old-id",
+        customClass: "cta-class",
+        dataAttributes: [],
+        ariaLabel: { defaultValue: "Button Aria" },
+      },
+      styles: {
+        variant: "secondary",
+        presetImage: "app-store",
+        button: {
+          fontFamily: "default",
+          fontSize: "default",
+          fontWeight: "default",
+          fontStyle: "default",
+          textTransform: "default",
+          borderRadius: "default",
+          letterSpacing: "default",
+        },
+        link: {
+          fontFamily: "default",
+          fontSize: "default",
+          fontWeight: "default",
+          fontStyle: "default",
+          textTransform: "default",
+          letterSpacing: "default",
+          includeCaret: "default",
+        },
+      },
+    });
+    const { onChange } = renderField(initialValue);
+
+    fireEvent.change(screen.getByDisplayValue("old-id"), {
+      target: { value: "new-id" },
+    });
+
+    expect(onChange).toHaveBeenCalledWith(
+      {
+        ...initialValue,
+        data: {
+          ...initialValue.data,
+          customId: "new-id",
+        },
+      },
+      undefined
+    );
+  });
+});
diff --git a/packages/visual-editor/src/fields/styledFields/ComprehensiveCTAField.tsx b/packages/visual-editor/src/fields/styledFields/ComprehensiveCTAField.tsx
new file mode 100644
index 000000000..396098c7a
--- /dev/null
+++ b/packages/visual-editor/src/fields/styledFields/ComprehensiveCTAField.tsx
@@ -0,0 +1,315 @@
+import React from "react";
+import { BaseField, FieldLabel, type FieldProps } from "@puckeditor/core";
+import {
+  isCtaVariantWithColor,
+  type CTAVariant,
+} from "../../components/atoms/cta.tsx";
+import { getCTAType } from "../../internal/utils/ctaFieldUtils.ts";
+import { type MsgString, pt } from "../../utils/i18n/platform.ts";
+import { ThemeColor, ThemeOptions } from "../../utils/themeConfigOptions.ts";
+import { PresetImageType, TranslatableString } from "../../types/types.ts";
+import { type YextCTAField } from "../CTASelectorField.tsx";
+import { type YextObjectField } from "../fields.ts";
+import { YextAutoField } from "../YextAutoField.tsx";
+import { defaultBaseTextStyles } from "./baseText.tsx";
+import { type StyledButtonValue } from "./StyledButtonField.tsx";
+import { type StyledLinkValue } from "./StyledLinkField.tsx";
+
+export type ComprehensiveCTAValue = {
+  data: {
+    /**
+     * Whether to render the <a> or <button> tag under the hood.
+     * Normal CTAs are "link".
+     * Custom implementations can use "button" to integrate with custom JS.
+     */
+    actionType: "link" | "button";
+    /** The data source for the CTA. */
+    cta: YextCTAField;
+    /** Whether to open the link in a new tab for actionType: "link". */
+    openInNewTab: boolean;
+    /** The label for actionType: "button". */
+    buttonText?: TranslatableString;
+    /** The id for actionType: "button". */
+    customId?: string;
+    /** The class names for actionType: "button". */
+    customClass?: string;
+    /** The data attributes for actionType: "button". */
+    dataAttributes?: Array<{ key: string; value: string }>;
+    /** The aria label for actionType: "button". */
+    ariaLabel?: TranslatableString;
+  };
+  styles: {
+    /** The visual variant of the CTA. */
+    variant: CTAVariant;
+    /** The preset image to use when cta.selectedType is "presetImage". */
+    presetImage?: PresetImageType;
+    /** The color of the button or link when cta.selectedType is not "presetImage". */
+    color?: ThemeColor;
+    /** The theme styling when the variant is "primary" or "secondary" */
+    button?: StyledButtonValue;
+    /** The theme styling when the variant is "link". */
+    link?: StyledLinkValue;
+  };
+  /** @internal Additional class names to pass to the underlying component. */
+  className?: string;
+  /** @internal Additional styles to pass to the underlying component. */
+  sx?: React.CSSProperties;
+  /** @internal The event name to use for Yext Analytics. */
+  eventName?: string;
+};
+
+export type ComprehensiveCTAField = BaseField & {
+  type: "comprehensiveCTA";
+  label?: string | MsgString;
+  visible?: boolean;
+  disableConstantValueToggle?: boolean;
+};
+
+type ComprehensiveCTAFieldProps = FieldProps<
+  ComprehensiveCTAField,
+  ComprehensiveCTAValue
+>;
+
+const defaultStyledButtonValue: StyledButtonValue = {
+  ...defaultBaseTextStyles,
+  borderRadius: "default",
+  letterSpacing: "default",
+};
+
+const defaultStyledLinkValue: StyledLinkValue = {
+  ...defaultBaseTextStyles,
+  letterSpacing: "default",
+  includeCaret: "default",
+};
+
+const defaultComprehensiveCTAValue: ComprehensiveCTAValue = {
+  data: {
+    actionType: "link",
+    cta: {
+      field: "",
+      constantValue: {
+        ctaType: "textAndLink",
+        label: "Call to Action",
+        link: "#",
+        linkType: "URL",
+      },
+      selectedType: "textAndLink",
+    },
+    openInNewTab: false,
+    buttonText: { defaultValue: "Button" },
+    customId: "",
+    customClass: "",
+    dataAttributes: [],
+    ariaLabel: { defaultValue: "Button" },
+  },
+  styles: {
+    variant: "primary",
+    presetImage: "app-store",
+    button: defaultStyledButtonValue,
+    link: defaultStyledLinkValue,
+  },
+};
+
+export const ComprehensiveCTAFieldOverride = ({
+  field,
+  value,
+  onChange,
+}: ComprehensiveCTAFieldProps) => {
+  const currentValue: ComprehensiveCTAValue = {
+    ...defaultComprehensiveCTAValue,
+    ...value,
+    data: {
+      ...defaultComprehensiveCTAValue.data,
+      ...value?.data,
+    },
+    styles: {
+      ...defaultComprehensiveCTAValue.styles,
+      ...value?.styles,
+      button: {
+        ...defaultStyledButtonValue,
+        ...value?.styles?.button,
+      },
+      link: {
+        ...defaultStyledLinkValue,
+        ...value?.styles?.link,
+      },
+    },
+  };
+
+  const actionType = currentValue.data.actionType;
+  const ctaType = getCTAType(currentValue.data.cta).ctaType;
+  const effectiveCtaType = actionType === "button" ? "textAndLink" : ctaType;
+  const showButtonFields = actionType === "button";
+  const showPresetImageField = effectiveCtaType === "presetImage";
+  const showColorField =
+    isCtaVariantWithColor(currentValue.styles.variant) && !showPresetImageField;
+  const showButtonStyleFields =
+    !showPresetImageField && currentValue.styles.variant !== "link";
+  const showLinkStyleFields =
+    !showPresetImageField && currentValue.styles.variant === "link";
+
+  const dataField = React.useMemo<
+    YextObjectField<ComprehensiveCTAValue["data"]>
+  >(
+    () => ({
+      type: "object",
+      objectFields: {
+        actionType: {
+          type: "radio",
+          label: pt("fields.actionType", "Action Type"),
+          options: [
+            { label: pt("fields.options.link", "Link"), value: "link" },
+            { label: pt("fields.options.button", "Button"), value: "button" },
+          ],
+        },
+        cta: {
+          type: "ctaSelector",
+          label: pt("fields.cta", "CTA"),
+          disableConstantValueToggle: field.disableConstantValueToggle,
+          visible: !showButtonFields,
+        },
+        openInNewTab: {
+          type: "radio",
+          label: pt("fields.openInNewTab", "Open in New Tab"),
+          options: [
+            { label: pt("fields.options.yes", "Yes"), value: true },
+            { label: pt("fields.options.no", "No"), value: false },
+          ],
+          visible: !showButtonFields,
+        },
+        buttonText: {
+          type: "translatableString",
+          label: pt("fields.buttonText", "Button Text"),
+          filter: { types: ["type.string"] },
+          visible: showButtonFields,
+        },
+        customId: {
+          type: "text",
+          label: pt("fields.customId", "Custom ID"),
+          visible: showButtonFields,
+        },
+        customClass: {
+          type: "text",
+          label: pt("fields.customClass", "Custom Class"),
+          visible: showButtonFields,
+        },
+        dataAttributes: {
+          type: "array",
+          label: pt("fields.dataAttributes", "Data Attributes"),
+          defaultItemProps: {
+            key: "",
+            value: "",
+          },
+          arrayFields: {
+            key: {
+              label: pt("fields.key", "Key"),
+              type: "text",
+            },
+            value: {
+              label: pt("fields.value", "Value"),
+              type: "text",
+            },
+          },
+          getItemSummary: (item: { key?: string }, index?: number) =>
+            item?.key?.trim()
+              ? item.key
+              : `${pt("dataAttribute", "Attribute")} ${(index ?? 0) + 1}`,
+          visible: showButtonFields,
+        },
+        ariaLabel: {
+          type: "translatableString",
+          label: pt("fields.ariaLabel", "Aria Label"),
+          filter: { types: ["type.string"] },
+          visible: showButtonFields,
+        },
+      },
+    }),
+    [field.disableConstantValueToggle, showButtonFields]
+  );
+
+  const stylesField = React.useMemo<
+    YextObjectField<ComprehensiveCTAValue["styles"]>
+  >(
+    () => ({
+      type: "object",
+      objectFields: {
+        variant: {
+          type: "radio",
+          label: pt("fields.variant", "Variant"),
+          options: ThemeOptions.CTA_VARIANT,
+          visible: !showPresetImageField,
+        },
+        presetImage: {
+          type: "basicSelector",
+          label: pt("fields.presetImage", "Preset Image"),
+          options: "PRESET_IMAGE",
+          visible: showPresetImageField,
+        },
+        color: {
+          type: "basicSelector",
+          label: pt("fields.color", "Color"),
+          options: "SITE_COLOR",
+          visible: showColorField,
+        },
+        button: {
+          type: "styledButton",
+          label: pt("fields.buttonStyles", "Button Styles"),
+          visible: showButtonStyleFields,
+        },
+        link: {
+          type: "styledLink",
+          label: pt("fields.linkStyles", "Link Styles"),
+          visible: showLinkStyleFields,
+        },
+      },
+    }),
+    [
+      showButtonStyleFields,
+      showColorField,
+      showLinkStyleFields,
+      showPresetImageField,
+    ]
+  );
+
+  return (
+    <div>
+      {field.label && <FieldLabel label={pt(field.label)} />}
+      <div className="ObjectField">
+        <div className="ObjectField-fieldset ve-flex ve-flex-col ve-gap-3">
+          <div>
+            <FieldLabel label={pt("fields.data", "Data")} />
+            <YextAutoField
+              field={dataField}
+              onChange={(nextValue, uiState) =>
+                onChange(
+                  {
+                    ...currentValue,
+                    data: nextValue,
+                  },
+                  uiState
+                )
+              }
+              value={currentValue.data}
+            />
+          </div>
+          <div>
+            <FieldLabel label={pt("fields.styles", "Styles")} />
+            <YextAutoField
+              field={stylesField}
+              onChange={(nextValue, uiState) =>
+                onChange(
+                  {
+                    ...currentValue,
+                    styles: nextValue,
+                  },
+                  uiState
+                )
+              }
+              value={currentValue.styles}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/visual-editor/src/fields/styledFields/index.ts b/packages/visual-editor/src/fields/styledFields/index.ts
index 175a9d7fa..0ef316bc8 100644
--- a/packages/visual-editor/src/fields/styledFields/index.ts
+++ b/packages/visual-editor/src/fields/styledFields/index.ts
@@ -1,3 +1,9 @@
+export {
+  ComprehensiveCTAFieldOverride,
+  type ComprehensiveCTAField,
+  type ComprehensiveCTAValue,
+} from "./ComprehensiveCTAField.tsx";
+
 export {
   StyledTextFieldOverride,
   type StyledTextField,