Buttons
A modern, customizable button shortcode with gradient styling, icons, and smart link handling.
Basic Usage
The above buttons are created with:
{{< button url="/contact" >}}Contact Us{{< /button >}}
{{< button url="https://example.com" new_tab="true" style="secondary" >}}Visit External Site{{< /button >}}
Style Variants
Primary (Default)
{{< button url="#" style="primary" >}}Primary Button{{< /button >}}
Secondary
{{< button url="#" style="secondary" >}}Secondary Button{{< /button >}}
Outline
{{< button url="#" style="outline" >}}Outline Button{{< /button >}}
Ghost
{{< button url="#" style="ghost" >}}Ghost Button{{< /button >}}
Sizes
Small
Medium (Default)
Large
Extra Large
{{< button url="#" size="sm" >}}Small Button{{< /button >}}
{{< button url="#" size="md" >}}Medium Button{{< /button >}}
{{< button url="#" size="lg" >}}Large Button{{< /button >}}
{{< button url="#" size="xl" >}}Extra Large{{< /button >}}
Alignment
Left (Default)
Center
Right
{{< button url="#" align="left" >}}Left Aligned{{< /button >}}
{{< button url="#" align="center" >}}Center Aligned{{< /button >}}
{{< button url="#" align="right" >}}Right Aligned{{< /button >}}
With Icons
Icon Before Text
Icon After Text
{{< button url="#" icon="arrow-down-tray" >}}Download{{< /button >}}
{{< button url="#" icon="arrow-right" icon_position="right" >}}Continue{{< /button >}}
Rounded Corners
Small Radius
Medium Radius (Default)
Large Radius
Pill Shape
{{< button url="#" rounded="sm" >}}Small Radius{{< /button >}}
{{< button url="#" rounded="md" >}}Medium Radius{{< /button >}}
{{< button url="#" rounded="lg" >}}Large Radius{{< /button >}}
{{< button url="#" rounded="full" >}}Pill Button{{< /button >}}
Advanced Examples
Call-to-Action Button
{{< button url="/signup" style="primary" size="lg" align="center" icon="rocket-launch" >}}Get Started Today{{< /button >}}
External Link with New Tab
{{< button url="https://github.com/hugo-blox/kit" new_tab="true" style="outline" icon="arrow-top-right-on-square" icon_position="right" >}}View on GitHub{{< /button >}}
Download Button
{{< button url="/files/document.pdf" style="secondary" icon="document-arrow-down" rounded="full" >}}Download PDF{{< /button >}}
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
url | string | # | Required. Button destination URL (internal or external) |
text | string | Inner content | Button text (overrides shortcode content) |
new_tab | boolean | false | Whether to open link in new tab |
style | string | primary | Button style: primary, secondary, outline, ghost |
size | string | md | Button size: sm, md, lg, xl |
align | string | left | Button alignment: left, center, right |
icon | string | - | Icon name from Hero Icons |
icon_position | string | left | Icon position: left, right |
rounded | string | md | Border radius: sm, md, lg, xl, full |
disabled | boolean | false | Whether button should be disabled |
Security Features
The button shortcode automatically handles security for external links:
- External links get
rel="noreferrer"attribute - External links opening in new tab get
rel="noopener noreferrer" - Internal links opening in new tab get
rel="noopener"
This ensures safe navigation while maintaining functionality.
Accessibility
The button shortcode includes built-in accessibility features:
- Proper
role="button"attribute aria-labelsupport- Keyboard focus indicators
- High contrast focus rings
- Disabled state handling
Mining Generalist ⛏️
AI Strategist & Evangelist 💻
Neurodivergent Unicorn 🦄
Allyson is a highly motivated mining and mineral processing engineer with 15 years of experience. Her background is primarily in comminution and flotation optimization utilizing advanced process controls and expert systems.
She completed a Masters of Data Science from the University of British Columbia to hone and utilize her data science skills and subject matter expertise to transform the mining industry.
Her research interests are concentrated on decentralized task allocation for haulage fleets and the use of advanced simulation and optimization for data-driven decision support.