Skip to main content
  1. Snippits & Exemplars/
  2. WolfspyreLabs Exemplars/
  3. WolfspyreLabs Shortcodes/

Button Deluxe

🐺🔥🔬 WolfspyreLabs Shortcodes
buttondeluxe outputs a more styled button component.

buttondeluxe
Output a styled button component.
Can be used to highlight a primary action.
It has the following:
  • href OR relref
    The URL or RELREF of the link
  • target ( Default: _blank ) The target of the link.
    • To open in the same window, _self.
    • Use _blank to open in a new window.
  • textColor ( Default: neutral ) specify the tailwind color of the text.
  • textDark ( Default: neutral-400 ) specify the tailwind color of the text when contrast polarity is reversed.
  • size ( Default: md ) The size option.

Size Options #

Value Padding: X Padding: Y Margin
xs 1 1 0
sm 2 1.5 0.25
md 3 2 0.25
lg 3.5 3 0.5
xl 4 3.5 0.5
xxl 5 4 0.75

Example:

Size Example code Example Button
xs {{< buttondeluxe href="#button" size="xs" target="_self" >}} Look Ma! No Clicky! {{< /buttondeluxe >}}
Look Ma! No Clicky!
sm {{< buttondeluxe href="#button" size="sm" target="_self" >}} Look Ma! No Clicky! {{< /buttondeluxe >}}
Look Ma! No Clicky!
md {{< buttondeluxe href="#button" target="_self" >}} Look Ma! No Clicky! {{< /buttondeluxe >}}
Look Ma! No Clicky!
lg {{< buttondeluxe href="#button" size="lg" target="_self" >}} Look Ma! No Clicky! {{< /buttondeluxe >}}
Look Ma! No Clicky!
xl {{< buttondeluxe href="#button" size="xl" target="_self" >}} Look Ma! No Clicky! {{< /buttondeluxe >}}
Look Ma! No Clicky!
xxl {{< buttondeluxe href="#button" size="xxl" target="_self" >}} Look Ma! No Clicky! {{< /buttondeluxe >}}
Look Ma! No Clicky!

{{< buttondeluxe href="#button" target="_self" >}}
Look Ma! No Clicky!
{{< /buttondeluxe >}}
Look Ma! No Clicky!
{{< buttondeluxe href="#button" size="lg" target="_self" >}}
Look Ma! No Clicky!
{{< /buttondeluxe >}}
Look Ma! No Clicky!
{{< buttondeluxe href="#button" size="xl" target="_self" >}}
Look Ma! No Clicky!
{{< /buttondeluxe >}}
Look Ma! No Clicky!
{{< buttondeluxe href="#button" size="xxl" target="_self" >}}
Look Ma! No Clicky!
{{< /buttondeluxe >}}
Look Ma! No Clicky!