Buttons

· 3 min read
teaching

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

{{< 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 >}}
{{< 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

ParameterTypeDefaultDescription
urlstring#Required. Button destination URL (internal or external)
textstringInner contentButton text (overrides shortcode content)
new_tabbooleanfalseWhether to open link in new tab
stylestringprimaryButton style: primary, secondary, outline, ghost
sizestringmdButton size: sm, md, lg, xl
alignstringleftButton alignment: left, center, right
iconstring-Icon name from Hero Icons
icon_positionstringleftIcon position: left, right
roundedstringmdBorder radius: sm, md, lg, xl, full
disabledbooleanfalseWhether 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-label support
  • Keyboard focus indicators
  • High contrast focus rings
  • Disabled state handling
Carol Hanna
Authors
Carol Hanna (she/her)

I am a PhD candidate in Computer Science at University College London, where my research explores how automation and AI can make software systems more resilient and adaptive. My work investigates automated repair and improvement through the lens of hot fixing and rapid recovery. Through projects combining search-based, reinforcement learning, and large language model–guided techniques, I study how intelligent systems can reason about, generate, and explain software changes. I have also examined the industrial and human aspects of rapid repair through studies of real-world hot fixing practices. I serve the software engineering community as a reviewer and organizer for top conferences and journals, as well as through teaching at UCL. Alongside my PhD, I work part-time as a Principal Research Scientist at a London-based startup, contributing to their tech stack and services. I am passionate about the startup ecosystem, with experience in venture capital and early-stage deep tech startups.

Research interests: Automated Software Engineering, Reinforcement Learning, Search-Based Software Engineering, Large Language Models, Automated Program Repair, Evolutionary Computation.