Buttons

Add call-to-action buttons with gradient styles, sizes, icons, and alignment using the Hugo button shortcode.

A modern, customizable button component with gradient styling, icons, and smart link handling.

Basic Usage

{{</* button url="/contact" */>}}Contact Us{{</* /button */>}}

{{</* button url="https://example.com" new_tab="true" style="secondary" */>}}Visit External Site{{</* /button */>}}

Style Variants

{{</* button url="#" style="primary" */>}}Primary Button{{</* /button */>}}
{{</* button url="#" style="secondary" */>}}Secondary Button{{</* /button */>}}
{{</* button url="#" style="outline" */>}}Outline Button{{</* /button */>}}
{{</* button url="#" style="ghost" */>}}Ghost Button{{</* /button */>}}

Style	Description
`primary`	Default bold gradient button
`secondary`	Muted/subtle variant
`outline`	Bordered with transparent background
`ghost`	Text-only, no border or background

Sizes

{{</* button url="#" size="sm" */>}}Small{{</* /button */>}}
{{</* button url="#" size="md" */>}}Medium (Default){{</* /button */>}}
{{</* button url="#" size="lg" */>}}Large{{</* /button */>}}
{{</* button url="#" size="xl" */>}}Extra Large{{</* /button */>}}

Alignment

{{</* button url="#" align="left" */>}}Left (Default){{</* /button */>}}
{{</* button url="#" align="center" */>}}Center{{</* /button */>}}
{{</* button url="#" align="right" */>}}Right{{</* /button */>}}

Icons

Use icons from Hero Icons:

{{</* button url="#" icon="download" */>}}Download{{</* /button */>}}
{{</* button url="#" icon="arrow-right" icon_position="right" */>}}Continue{{</* /button */>}}

Rounded Corners

{{</* button url="#" rounded="sm" */>}}Small Radius{{</* /button */>}}
{{</* button url="#" rounded="md" */>}}Medium (Default){{</* /button */>}}
{{</* button url="#" rounded="lg" */>}}Large Radius{{</* /button */>}}
{{</* button url="#" rounded="full" */>}}Pill{{</* /button */>}}

Advanced Examples

Call-to-Action

{{</* button url="/signup" style="primary" size="lg" align="center" icon="rocket-launch" */>}}Get Started Today{{</* /button */>}}

External Link

{{</* button url="https://github.com/HugoBlox/kit" new_tab="true" style="outline" icon="arrow-top-right-on-square" icon_position="right" */>}}View on GitHub{{</* /button */>}}

Download

{{</* button url="/files/document.pdf" style="secondary" icon="document-arrow-down" rounded="full" */>}}Download PDF{{</* /button */>}}

Parameters

Parameter	Type	Default	Description
`url`	string	`#`	Required. Destination URL (internal or external)
`text`	string	Inner content	Button text (overrides shortcode content)
`new_tab`	boolean	`false`	Open link in new tab
`style`	string	`primary`	`primary`, `secondary`, `outline`, `ghost`
`size`	string	`md`	`sm`, `md`, `lg`, `xl`
`align`	string	`left`	`left`, `center`, `right`
`icon`	string	—	Icon name from Hero Icons
`icon_position`	string	`left`	`left`, `right`
`rounded`	string	`md`	`sm`, `md`, `lg`, `xl`, `full`
`disabled`	boolean	`false`	Disable the button

Security

External links automatically get secure attributes:

Link Type	Attributes
External	`rel="noreferrer"`
External + new tab	`rel="noopener noreferrer"`
Internal + new tab	`rel="noopener"`

Accessibility

Built-in accessibility features include role="button", aria-label support, keyboard focus indicators, high-contrast focus rings, and disabled state handling.