Buttons

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

Basic Usage

Visit External Site

The above buttons are created with:

Contact Us

Visit External Site

Style Variants

Primary (Default)

Primary Button

Primary Button

Secondary

Secondary Button

Secondary Button

Outline

Outline Button

Outline Button

Ghost

Ghost Button

Ghost Button

Sizes

Small

Small Button

Medium (Default)

Medium Button

Large

Large Button

Extra Large

Small Button
Medium Button
Large Button
Extra Large

Alignment

Left (Default)

Left Aligned

Center

Center Aligned

Right

Right Aligned

Left Aligned
Center Aligned
Right Aligned

With Icons

Icon Before Text

Download

Icon After Text

Continue

Download
Continue

Rounded Corners

Small Radius

Medium Radius (Default)

Medium Radius

Large Radius

Pill Shape

Pill Button

Small Radius
Medium Radius
Large Radius
Pill Button

Advanced Examples

Call-to-Action Button

Get Started Today

Get Started Today

External Link with New Tab

View on GitHub

View on GitHub

Download Button

Download PDF

Download PDF

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-label support
Keyboard focus indicators
High contrast focus rings
Disabled state handling

Xinyu Zhang