Bootstrap Button Link Shortcode

April 10, 2023 2 min read Shortcode Docs Button Link

On this page

Donate

Please check out the tutorial to start using Hugo modules.

A brief description about the button link shortcode.

Usage

Closing Button Link Syntax

1{{< bs/btn-link >}}
2TEXT
3{{< /bs/btn-link >}}

Recommended for rich button text, it’s useful for the case of nesting shortcodes, such as icons/icon.

Self-Closing Button Link Syntax

1{{< bs/btn-link text=TEXT />}}

Recommended for plain button text.

Parameters

`url`

Position	Name	Type	Default	Required
`#0`	`url`	`string`	-	Y

The URL or reference of button link, it'll look for the reference page first for internal pages.

`style`

Position	Name	Type	Default	Required
`#1`	`style`	`string`	`primary`	-

The button link style.

`style` options

primary, secondary, success, danger, warning, info, light, dark, link

`outline`

Position	Name	Type	Default	Required
`#2`	`outline`	`string`	`false`	-

Whether to enable outline style.

`size`

Position	Name	Type	Default	Required
`#3`	`size`	`string`	-	-

The size of button link.

`size` options

sm, lg

`class`

Position	Name	Type	Default	Required
-	`class`	`string`	-	-

Used to add extra CSS classes.

Examples

Self-Closing Button Link

1{{< bs/btn-link url="#self-closing-button-link" text="Self-Closing" />}}

Self-Closing

Closing Button Link

1{{< bs/btn-link url="#closing-button-link" >}}
2Closing {{< icons/icon vendor=bs name=x-circle >}}
3{{< /bs/btn-link >}}

Closing

Button Link Styles

Primary Secondary Success Danger Warning Info Light Dark Link

 1{{< bs/btn-link "#button-link-styles" "primary" >}}
 2Primary
 3{{< /bs/btn-link >}}
 4
 5{{< bs/btn-link url="#button-link-styles" style="secondary" text="Secondary" />}}
 6
 7{{< bs/btn-link "#button-link-styles" "success" >}}
 8Success
 9{{< /bs/btn-link >}}
10
11{{< bs/btn-link "#button-link-styles" "danger" >}}
12Danger
13{{< /bs/btn-link >}}
14
15{{< bs/btn-link "#button-link-styles" "warning" >}}
16Warning
17{{< /bs/btn-link >}}
18
19{{< bs/btn-link "#button-link-styles" "info" >}}
20Info
21{{< /bs/btn-link >}}
22
23{{< bs/btn-link "#button-link-styles" "light" >}}
24Light
25{{< /bs/btn-link >}}
26
27{{< bs/btn-link "#button-link-styles" "dark" >}}
28Dark
29{{< /bs/btn-link >}}
30
31{{< bs/btn-link  "#button-link-styles" "link" >}}
32Link
33{{< /bs/btn-link >}}

Outline Button Link

Primary outline button link

1{{< bs/btn-link url="#outline-button-link" outline=true >}}
2Primary outline button link
3{{< /bs/btn-link >}}

Button Link Sizes

Smaller button link size Normal button link size Lager button link size

 1{{< bs/btn-link url="#button-link-sizes" size=sm >}}
 2Smaller button link size
 3{{< /bs/btn-link >}}
 4
 5{{< bs/btn-link url="#button-link-sizes" >}}
 6Normal button link size
 7{{< /bs/btn-link >}}
 8
 9{{< bs/btn-link url="#button-link-sizes" size=lg >}}
10Lager button link size
11{{< /bs/btn-link >}}

Button Link with Extra Classes

Button link with extra classes

1{{< bs/btn-link url="#button-link-with-extra-classes" size=lg class="d-block py-3 rounded-0" >}}
2Button link with extra classes
3{{< /bs/btn-link >}}

External and Internal Button Links

HB framework (external) Docker image (internal)

1{{< bs/btn-link "https://hbstack.dev/" >}}
2External link
3{{< /bs/btn-link >}}
4
5{{</* bs/btn-link "docs/docker" >}}
6Internal link
7{{< /bs/btn-link >}}

Alert

Clearfix

Browse Hugo Bootstrap Module