Design Review
Button System
All variants, sizes, and icon positions for the Hubworks button system.
Every button is rendered via hubworks_button() using ACF link field arrays.
Hover any button to see the starburst animation.
Outlined Variants
.btn-outline
.btn-outline-teal
.btn-outline-white — on dark background
Ghost & Link Variants
Icon Positions
Icon leading — icon_position: 'leading'
Icon trailing — icon_position: 'trailing'
Alternate Context — Dark Background
Use these variants on dark-coloured section backgrounds.
Filled white + teal
Outlined white + ghost white
Link white
PHP Helper Usage
Copy the patterns below into any block render.php or template file.
The link parameter always accepts an ACF Link field array.
// Basic teal CTA — medium size (default)
echo hubworks_button([
'link' => get_field('cta_link'),
'style' => 'teal',
]);
// Large outlined button
echo hubworks_button([
'link' => get_field('cta_link'),
'style' => 'outline',
'size' => 'lg',
]);
// Teal with trailing Font Awesome icon
echo hubworks_button([
'link' => get_field('cta_link'),
'style' => 'teal',
'size' => 'md',
'icon' => hubworks_fa_icon( 'fa-solid fa-arrow-right' ),
'icon_position' => 'trailing',
]);
// Icon-only button (aria-label set from link title)
echo hubworks_button([
'link' => get_field('cta_link'),
'style' => 'outline-teal',
'size' => 'md',
'icon' => hubworks_fa_icon( 'fa-solid fa-arrow-right' ),
'icon_position' => 'only',
]);
// On a dark background section — use white or outline-white
echo hubworks_button([
'link' => get_field('cta_link'),
'style' => 'white', // or 'outline-white' / 'ghost-white'
'size' => 'lg',
]);
// With extra classes and custom data attribute
echo hubworks_button([
'link' => get_field('cta_link'),
'style' => 'blue',
'size' => 'md',
'extra_classes' => 'w-full justify-center',
'attrs' => [ 'data-track' => 'hero-cta' ],
]);
// Echo directly (no return value needed)
hubworks_the_button([
'link' => get_field('cta_link'),
'style' => 'pink',
]);