Use the button shortcode to display a button with a hyperlink.
Use the button shortcode to display a button with a hyperlink. The inner content is used as button title. The button supports an optional badge and tooltip.
The shortcode supports the following arguments:
| Argument | Required | Description |
|---|---|---|
| href | No | Optional address for the button or hyperlink. Automatically assigned when using collapse. |
| relref | No | Optional name of the page to link to. Replaces href with a relative link if set. |
| state | No | Optional state of the button, either “enabled” (default), “disabled”, “active”, or “inactive”. |
| size | No | Optional size of the button, either “sm”, “md” (default), or “lg”. |
| color | No | Optional theme color of the element, either “primary” (default), “secondary”, “success”, “danger”, “warning”, “info”, “light”, “dark”, “white” or “black”. |
| badge | No | Optional positioned badge to display on top of the button. |
| outline | No | Optional flag indicating the button should be outlined, either “false” (default) or “true”. |
| aria-label | No | Optional label for the badge. |
| tooltip | No | Optional text to display in a tooltip. Cannot be used together with collapse. Ignored for active/inactive buttons. |
| collapse | No | Optional panel to collapse. Cannot be used together with tooltip. Ignored for active/inactive buttons. |
| placement | No | How to position the tooltip: “top” (default), “bottom”, “left”, or “right”. |
As an example, the following shortcode displays a tooltip for a dark button with a badge.
{{< button color="dark" tooltip="Click on the inbox to view your unread messages" href="#" badge="99+" >}}
Inbox
{{< /button >}}