@sociallane/elements 1.0.14 → 1.0.16

package/admin/views/setup-widget-catalog-frontend.php

@@ -45,7 +45,7 @@ $sections = [
 				<?php esc_html_e( 'Widget Catalog Setup', 'sociallane-elements' ); ?>
 			</h1>
 			<p class="text-neutral-500 dark:text-neutral-400">
-				<?php esc_html_e( 'Install SocialLane Elements via npx (cherry-pick widgets or full install), add the Widget Catalog to a page, and run the commands you need. No manual widgets.json editing when using npx add.', 'sociallane-elements' ); ?>
+				<?php esc_html_e( 'Install SocialLane Elements via npx (full install or component install), add the Widget Catalog to a page, and run copy-ready commands. No manual widgets.json editing when using npx add.', 'sociallane-elements' ); ?>
 			</p>
 		</header>
 
@@ -84,16 +84,25 @@ $sections = [
 
 					<div>
 						<h3 class="text-sm font-semibold text-neutral-800 dark:text-neutral-200 mb-2"><?php esc_html_e( 'Option A: Install via npx (recommended)', 'sociallane-elements' ); ?></h3>
-						<p class="text-sm mb-2"><?php esc_html_e( 'From your WordPress root (the folder that contains wp-content), run one of:', 'sociallane-elements' ); ?></p>
-						<p class="text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1"><?php esc_html_e( 'Cherry-pick widgets (no manual widgets.json):', 'sociallane-elements' ); ?></p>
-						<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200"><code>npx @sociallane/elements --minimal</code></pre>
-						<p class="text-neutral-500 dark:text-neutral-400 text-sm mt-1"><?php esc_html_e( 'Then add only the widgets you need (run from WordPress root or from the plugin directory):', 'sociallane-elements' ); ?></p>
+						<p class="text-sm mb-2"><?php esc_html_e( 'From your WordPress root (the folder that contains wp-content), use one of these install flows:', 'sociallane-elements' ); ?></p>
+
+						<p class="text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1"><?php esc_html_e( 'Full install (all widget components):', 'sociallane-elements' ); ?></p>
+						<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200"><code>npx @sociallane/elements</code></pre>
+						<p class="text-neutral-500 dark:text-neutral-400 text-sm mt-1"><?php esc_html_e( 'Installs the full plugin to wp-content/plugins/sociallane-elements and runs install/build automatically.', 'sociallane-elements' ); ?></p>
+
+						<p class="text-xs font-medium text-neutral-500 dark:text-neutral-400 mt-3 mb-1"><?php esc_html_e( 'Base install + add selected components/widgets:', 'sociallane-elements' ); ?></p>
+						<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200"><code>npx @sociallane/elements --base</code></pre>
+						<p class="text-neutral-500 dark:text-neutral-400 text-sm mt-1"><?php esc_html_e( 'Then add only the widgets you need:', 'sociallane-elements' ); ?></p>
 						<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200 mt-2"><code>npx @sociallane/elements add hero-split faq-stacked content-block widget-filter</code></pre>
 						<p class="text-neutral-500 dark:text-neutral-400 text-sm mt-2"><?php esc_html_e( 'Each add updates widgets.json and runs the build automatically. Include widget-filter if you want the Widget Catalog in Elementor.', 'sociallane-elements' ); ?></p>
-						<p class="text-xs font-medium text-neutral-500 dark:text-neutral-400 mt-3 mb-1"><?php esc_html_e( 'Or install with all widgets:', 'sociallane-elements' ); ?></p>
-						<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200"><code>npx @sociallane/elements</code></pre>
-						<p class="text-neutral-500 dark:text-neutral-400 text-sm mt-1"><?php esc_html_e( 'Copies the full plugin to wp-content/plugins/sociallane-elements, runs npm install and build. Activate in WordPress → Plugins.', 'sociallane-elements' ); ?></p>
-						<p class="text-neutral-500 dark:text-neutral-400 text-sm mt-2"><?php esc_html_e( 'Custom path: npx @sociallane/elements --minimal path/to/wp-content/plugins/sociallane-elements', 'sociallane-elements' ); ?></p>
+
+						<p class="text-xs font-medium text-neutral-500 dark:text-neutral-400 mt-3 mb-1"><?php esc_html_e( 'Custom target path:', 'sociallane-elements' ); ?></p>
+						<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200"><code>npx @sociallane/elements --base path/to/wp-content/plugins/sociallane-elements
+npx @sociallane/elements add --target path/to/wp-content/plugins/sociallane-elements hero-split faq-stacked</code></pre>
+
+						<p class="text-xs font-medium text-neutral-500 dark:text-neutral-400 mt-3 mb-1"><?php esc_html_e( 'Helper commands:', 'sociallane-elements' ); ?></p>
+						<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200"><code>npx @sociallane/elements list
+npx @sociallane/elements doctor --target wp-content/plugins/sociallane-elements</code></pre>
 					</div>
 
 					<div>
@@ -158,7 +167,14 @@ npm run build</code></pre>
 						<p class="text-sm mb-2"><?php esc_html_e( 'If you add or remove widget folders by hand (e.g. submodules), sync widgets.json then build:', 'sociallane-elements' ); ?></p>
 						<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200"><code>npm run sync-widgets
 npm run build</code></pre>
-						<p class="text-neutral-500 dark:text-neutral-400 text-sm mt-2"><?php esc_html_e( 'Or use npx @sociallane/elements add &lt;slug&gt; to add widgets without editing widgets.json.', 'sociallane-elements' ); ?></p>
+						<p class="text-neutral-500 dark:text-neutral-400 text-sm mt-2"><?php esc_html_e( 'Or use npx @sociallane/elements add <slug> to add widgets without editing widgets.json.', 'sociallane-elements' ); ?></p>
+						<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200 mt-2"><code>npx @sociallane/elements add hero-split faq-stacked
+npx @sociallane/elements add --only widget-filter</code></pre>
+					</div>
+					<div>
+						<h3 class="text-sm font-semibold text-neutral-800 dark:text-neutral-200 mb-2"><?php esc_html_e( 'Diagnostics', 'sociallane-elements' ); ?></h3>
+						<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200"><code>npx @sociallane/elements doctor --target wp-content/plugins/sociallane-elements
+npx @sociallane/elements list --json</code></pre>
 					</div>
 					<div>
 						<h3 class="text-sm font-semibold text-neutral-800 dark:text-neutral-200 mb-2"><?php esc_html_e( 'Clean reinstall (node_modules)', 'sociallane-elements' ); ?></h3>
@@ -184,8 +200,8 @@ npm run build</code></pre>
 				</summary>
 				<div class="p-5 pt-0 border-t border-neutral-200 dark:border-neutral-700">
 					<ul class="space-y-2 list-disc list-inside ml-2">
-						<li><strong><?php esc_html_e( 'Copy single widget', 'sociallane-elements' ); ?></strong> — <?php esc_html_e( 'Each card shows the full npm install command; use the Copy button next to it.', 'sociallane-elements' ); ?></li>
-						<li><strong><?php esc_html_e( 'Collection', 'sociallane-elements' ); ?></strong> — <?php esc_html_e( 'Check “Add to collection” on the widgets you want, then use “Copy npm install” in the sidebar to get one command that installs all selected packages.', 'sociallane-elements' ); ?></li>
+						<li><strong><?php esc_html_e( 'Copy single widget', 'sociallane-elements' ); ?></strong> — <?php esc_html_e( 'Each card shows the install command in the selected format (npm install or npx add); use the Copy button next to it.', 'sociallane-elements' ); ?></li>
+						<li><strong><?php esc_html_e( 'Collection', 'sociallane-elements' ); ?></strong> — <?php esc_html_e( 'Check “Add to collection” on the widgets you want, then copy one combined install command from the sidebar.', 'sociallane-elements' ); ?></li>
 						<li><strong><?php esc_html_e( 'Copy Name', 'sociallane-elements' ); ?></strong> — <?php esc_html_e( 'Copies the widget slug (e.g. hero-split) for use in widgets.json or docs.', 'sociallane-elements' ); ?></li>
 					</ul>
 				</div>

package/docs/install-new-instance.md

@@ -49,56 +49,72 @@ cd wp-content/plugins/sociallane-elements && npm install && npm run build
 
 ---
 
-## Option 3: Install from npm (automated)
+## Option 3: Install from npm / npx (automated)
 
-**Cherry-pick workflow (recommended):** install the plugin with no widgets, then add only the widgets you want:
+### A) Install everything (core + all widget components)
 
 ```bash
 # From your WordPress root (directory that contains wp-content)
-npx @sociallane/elements --base
+npx @sociallane/elements
 ```
 
-Then add widgets by slug (no manual `widgets.json` editing):
+This installs `sociallane-elements` to `wp-content/plugins/sociallane-elements`, installs dependencies, syncs widgets, and builds assets.
+
+### B) Install only base plugin, then add selected components/widgets
+
+Use this when you want to keep the plugin minimal and import widget components yourself.
 
 ```bash
+# 1) Install base plugin only (no widget component folders imported)
+npx @sociallane/elements --base
+
+# 2) Add only the widgets you want
 npx @sociallane/elements add hero-split faq-stacked content-block widget-filter
 ```
 
-Each `add` updates `widgets.json` and runs the build. You can run `add` anytime to add more widgets.
+Each `add` command updates `widgets.json`, copies only those widget component folders, and runs install/build.
+
+### C) Install a single widget package
 
-**Full install** (all widgets included):
+Use per-widget packages when you want one command per widget:
 
 ```bash
-npx @sociallane/elements
+# From your WordPress root or wp-content/plugins
+npx @sociallane/widget-content-block
+npx @sociallane/widget-faq-stacked
 ```
 
-This copies the full plugin to `wp-content/plugins/sociallane-elements`, runs `npm install` (syncs `widgets.json` and builds). Activate in WordPress → Plugins.
+Each `@sociallane/widget-<slug>` package installs base plugin if needed, then adds that widget.
 
-**Custom path:**
+### D) Use custom target path (run from anywhere)
 
 ```bash
+# Base install to explicit target
 npx @sociallane/elements --base path/to/wp-content/plugins/sociallane-elements
+
+# Add widgets to explicit target
 npx @sociallane/elements add --target path/to/wp-content/plugins/sociallane-elements hero-split faq-stacked
 ```
 
-**Single widget (per-widget packages):**
-
-You can install one widget at a time via its own package. This installs the SocialLane Elements plugin if needed, then adds that widget and builds:
+### E) Useful helper commands
 
 ```bash
-# From your WordPress root or wp-content/plugins
-npx @sociallane/widget-content-block
-npx @sociallane/widget-faq-stacked
-```
+# List all available widget slugs
+npx @sociallane/elements list
 
-Each package is published as `@sociallane/widget-<slug>`. Use this when you only need one or two widgets and want a single command per widget.
+# Machine-readable list
+npx @sociallane/elements list --json
+
+# Validate environment + plugin install state
+npx @sociallane/elements doctor --target path/to/wp-content/plugins/sociallane-elements
+```
 
 ---
 
 ## Post-install
 
 1. **Build:** Runs automatically after `npm install`. To run manually: `npm run build`.
-2. **Widget selection:** Edit `widgets.json` to load only the widgets you need. If missing, `npm run setup` creates it from `widgets.json.minimal`.
+2. **Widget selection:** Use `npx @sociallane/elements add <slug...>` to add selected widgets, or edit `widgets.json` directly.
 3. **Production mode:** Add to `wp-config.php` if styles don't load:
    ```php
    define( 'SOCIALLANE_ELEMENTS_VITE_PRODUCTION', true );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sociallane/elements",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "description": "Elementor widgets and elements with Tailwind CSS for SocialLane. WordPress plugin.",
   "type": "module",
   "private": false,

package/packages/widgets/hero-overlay/templates/wrapper.php

@@ -127,32 +127,34 @@ foreach ( $slides as $s ) {
 									class="hero-overlay__cta-wrap <?php echo $is_slider ? ( $index === 0 ? '' : ' hidden' ) : ''; ?>"
 									data-slide-index="<?php echo (int) $index; ?>"
 								>
-									<a
-										href="<?php echo esc_url( $slide['cta']['url'] ?? '#' ); ?>"
-										class="<?php echo esc_attr( $view['classes']['cta_bar'] ?? '' ); ?>"
-										<?php echo ! empty( $slide['cta']['attrs'] ) ? ' ' . $slide['cta']['attrs'] : ''; ?>
-									>
-										<span><?php echo $slide['cta']['text']; ?></span>
-										<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true">
-											<path d="M5 12h14M19 12l-4-4M19 12l-4 4"/>
-										</svg>
-									</a>
+									<?php
+									$button = $slide['cta'];
+									$button['class'] = trim( ( $view['classes']['cta_bar'] ?? '' ) . ' ' . ( $button['class'] ?? '' ) );
+									if ( empty( $button['icon'] ) ) {
+										$button['icon']          = [ 'value' => 'eicon-arrow-right', 'library' => 'eicons' ];
+										$button['icon_position'] = 'right';
+									}
+									include $elements_path . '/button/templates/render.php';
+									?>
 								</div>
 							<?php endif; ?>
 						<?php endforeach; ?>
 					<?php endif; ?>
 				</div>
 				<?php if ( ! empty( $view['anchor_button'] ) ) : ?>
-					<a
-						href="<?php echo esc_url( $view['anchor_button']['url'] ); ?>"
-						class="<?php echo esc_attr( $view['classes']['anchor_btn'] ?? '' ); ?>"
-						aria-label="<?php echo esc_attr( $view['anchor_button']['text'] ); ?>"
-					>
-						<span><?php echo $view['anchor_button']['text']; ?></span>
-						<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true">
-							<path d="M12 5v14M19 12l-7 7-7-7"/>
-						</svg>
-					</a>
+					<?php
+					$button = [
+						'text'          => $view['anchor_button']['text'],
+						'url'           => $view['anchor_button']['url'],
+						'variant'       => 'ghost',
+						'size'          => 'md',
+						'class'         => $view['classes']['anchor_btn'] ?? '',
+						'icon'          => [ 'value' => 'eicon-chevron-down', 'library' => 'eicons' ],
+						'icon_position' => 'right',
+						'attrs'         => 'aria-label="' . esc_attr( $view['anchor_button']['text'] ) . '"',
+					];
+					include $elements_path . '/button/templates/render.php';
+					?>
 				<?php endif; ?>
 			</div>
 

package/packages/widgets/hero-overlay-single/templates/wrapper.php

@@ -127,32 +127,34 @@ foreach ( $slides as $s ) {
 									class="hero-overlay__cta-wrap <?php echo $is_slider ? ( $index === 0 ? '' : ' hidden' ) : ''; ?>"
 									data-slide-index="<?php echo (int) $index; ?>"
 								>
-									<a
-										href="<?php echo esc_url( $slide['cta']['url'] ?? '#' ); ?>"
-										class="<?php echo esc_attr( $view['classes']['cta_bar'] ?? '' ); ?>"
-										<?php echo ! empty( $slide['cta']['attrs'] ) ? ' ' . $slide['cta']['attrs'] : ''; ?>
-									>
-										<span><?php echo $slide['cta']['text']; ?></span>
-										<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true">
-											<path d="M5 12h14M19 12l-4-4M19 12l-4 4"/>
-										</svg>
-									</a>
+									<?php
+									$button = $slide['cta'];
+									$button['class'] = trim( ( $view['classes']['cta_bar'] ?? '' ) . ' ' . ( $button['class'] ?? '' ) );
+									if ( empty( $button['icon'] ) ) {
+										$button['icon']          = [ 'value' => 'eicon-arrow-right', 'library' => 'eicons' ];
+										$button['icon_position'] = 'right';
+									}
+									include $elements_path . '/button/templates/render.php';
+									?>
 								</div>
 							<?php endif; ?>
 						<?php endforeach; ?>
 					<?php endif; ?>
 				</div>
 				<?php if ( ! empty( $view['anchor_button'] ) ) : ?>
-					<a
-						href="<?php echo esc_url( $view['anchor_button']['url'] ); ?>"
-						class="<?php echo esc_attr( $view['classes']['anchor_btn'] ?? '' ); ?>"
-						aria-label="<?php echo esc_attr( $view['anchor_button']['text'] ); ?>"
-					>
-						<span><?php echo $view['anchor_button']['text']; ?></span>
-						<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true">
-							<path d="M12 5v14M19 12l-7 7-7-7"/>
-						</svg>
-					</a>
+					<?php
+					$button = [
+						'text'          => $view['anchor_button']['text'],
+						'url'           => $view['anchor_button']['url'],
+						'variant'       => 'ghost',
+						'size'          => 'md',
+						'class'         => $view['classes']['anchor_btn'] ?? '',
+						'icon'          => [ 'value' => 'eicon-chevron-down', 'library' => 'eicons' ],
+						'icon_position' => 'right',
+						'attrs'         => 'aria-label="' . esc_attr( $view['anchor_button']['text'] ) . '"',
+					];
+					include $elements_path . '/button/templates/render.php';
+					?>
 				<?php endif; ?>
 			</div>
 

package/packages/widgets/hero-overlay-slider/templates/wrapper.php

@@ -127,32 +127,34 @@ foreach ( $slides as $s ) {
 									class="hero-overlay__cta-wrap <?php echo $is_slider ? ( $index === 0 ? '' : ' hidden' ) : ''; ?>"
 									data-slide-index="<?php echo (int) $index; ?>"
 								>
-									<a
-										href="<?php echo esc_url( $slide['cta']['url'] ?? '#' ); ?>"
-										class="<?php echo esc_attr( $view['classes']['cta_bar'] ?? '' ); ?>"
-										<?php echo ! empty( $slide['cta']['attrs'] ) ? ' ' . $slide['cta']['attrs'] : ''; ?>
-									>
-										<span><?php echo $slide['cta']['text']; ?></span>
-										<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true">
-											<path d="M5 12h14M19 12l-4-4M19 12l-4 4"/>
-										</svg>
-									</a>
+									<?php
+									$button = $slide['cta'];
+									$button['class'] = trim( ( $view['classes']['cta_bar'] ?? '' ) . ' ' . ( $button['class'] ?? '' ) );
+									if ( empty( $button['icon'] ) ) {
+										$button['icon']          = [ 'value' => 'eicon-arrow-right', 'library' => 'eicons' ];
+										$button['icon_position'] = 'right';
+									}
+									include $elements_path . '/button/templates/render.php';
+									?>
 								</div>
 							<?php endif; ?>
 						<?php endforeach; ?>
 					<?php endif; ?>
 				</div>
 				<?php if ( ! empty( $view['anchor_button'] ) ) : ?>
-					<a
-						href="<?php echo esc_url( $view['anchor_button']['url'] ); ?>"
-						class="<?php echo esc_attr( $view['classes']['anchor_btn'] ?? '' ); ?>"
-						aria-label="<?php echo esc_attr( $view['anchor_button']['text'] ); ?>"
-					>
-						<span><?php echo $view['anchor_button']['text']; ?></span>
-						<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true">
-							<path d="M12 5v14M19 12l-7 7-7-7"/>
-						</svg>
-					</a>
+					<?php
+					$button = [
+						'text'          => $view['anchor_button']['text'],
+						'url'           => $view['anchor_button']['url'],
+						'variant'       => 'ghost',
+						'size'          => 'md',
+						'class'         => $view['classes']['anchor_btn'] ?? '',
+						'icon'          => [ 'value' => 'eicon-chevron-down', 'library' => 'eicons' ],
+						'icon_position' => 'right',
+						'attrs'         => 'aria-label="' . esc_attr( $view['anchor_button']['text'] ) . '"',
+					];
+					include $elements_path . '/button/templates/render.php';
+					?>
 				<?php endif; ?>
 			</div>
 

package/widgets/hero-overlay/templates/wrapper.php

@@ -127,32 +127,34 @@ foreach ( $slides as $s ) {
 									class="hero-overlay__cta-wrap <?php echo $is_slider ? ( $index === 0 ? '' : ' hidden' ) : ''; ?>"
 									data-slide-index="<?php echo (int) $index; ?>"
 								>
-									<a
-										href="<?php echo esc_url( $slide['cta']['url'] ?? '#' ); ?>"
-										class="<?php echo esc_attr( $view['classes']['cta_bar'] ?? '' ); ?>"
-										<?php echo ! empty( $slide['cta']['attrs'] ) ? ' ' . $slide['cta']['attrs'] : ''; ?>
-									>
-										<span><?php echo $slide['cta']['text']; ?></span>
-										<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true">
-											<path d="M5 12h14M19 12l-4-4M19 12l-4 4"/>
-										</svg>
-									</a>
+									<?php
+									$button = $slide['cta'];
+									$button['class'] = trim( ( $view['classes']['cta_bar'] ?? '' ) . ' ' . ( $button['class'] ?? '' ) );
+									if ( empty( $button['icon'] ) ) {
+										$button['icon']          = [ 'value' => 'eicon-arrow-right', 'library' => 'eicons' ];
+										$button['icon_position'] = 'right';
+									}
+									include $elements_path . '/button/templates/render.php';
+									?>
 								</div>
 							<?php endif; ?>
 						<?php endforeach; ?>
 					<?php endif; ?>
 				</div>
 				<?php if ( ! empty( $view['anchor_button'] ) ) : ?>
-					<a
-						href="<?php echo esc_url( $view['anchor_button']['url'] ); ?>"
-						class="<?php echo esc_attr( $view['classes']['anchor_btn'] ?? '' ); ?>"
-						aria-label="<?php echo esc_attr( $view['anchor_button']['text'] ); ?>"
-					>
-						<span><?php echo $view['anchor_button']['text']; ?></span>
-						<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true">
-							<path d="M12 5v14M19 12l-7 7-7-7"/>
-						</svg>
-					</a>
+					<?php
+					$button = [
+						'text'          => $view['anchor_button']['text'],
+						'url'           => $view['anchor_button']['url'],
+						'variant'       => 'ghost',
+						'size'          => 'md',
+						'class'         => $view['classes']['anchor_btn'] ?? '',
+						'icon'          => [ 'value' => 'eicon-chevron-down', 'library' => 'eicons' ],
+						'icon_position' => 'right',
+						'attrs'         => 'aria-label="' . esc_attr( $view['anchor_button']['text'] ) . '"',
+					];
+					include $elements_path . '/button/templates/render.php';
+					?>
 				<?php endif; ?>
 			</div>