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
ORrelref
- 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.
- To open in the same 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 >}}
{{< buttondeluxe href="#button" size="lg" target="_self" >}}
Look Ma! No Clicky!
{{< /buttondeluxe >}}
{{< buttondeluxe href="#button" size="xl" target="_self" >}}
Look Ma! No Clicky!
{{< /buttondeluxe >}}
{{< buttondeluxe href="#button" size="xxl" target="_self" >}}
Look Ma! No Clicky!
{{< /buttondeluxe >}}