Button

Use the button shortcode to display a button with a hyperlink.

Overview

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.

Arguments

The shortcode supports the following arguments:

ArgumentRequiredDescription
hrefNoOptional address for the button or hyperlink. Automatically assigned when using collapse.
relrefNoOptional name of the page to link to. Replaces href with a relative link if set.
stateNoOptional state of the button, either “enabled” (default), “disabled”, “active”, or “inactive”.
sizeNoOptional size of the button, either “sm”, “md” (default), or “lg”.
colorNoOptional theme color of the element, either “primary” (default), “secondary”, “success”, “danger”, “warning”, “info”, “light”, “dark”, “white” or “black”.
badgeNoOptional positioned badge to display on top of the button.
outlineNoOptional flag indicating the button should be outlined, either “false” (default) or “true”.
aria-labelNoOptional label for the badge.
tooltipNoOptional text to display in a tooltip. Cannot be used together with collapse. Ignored for active/inactive buttons.
collapseNoOptional panel to collapse. Cannot be used together with tooltip. Ignored for active/inactive buttons.
placementNoHow to position the tooltip: “top” (default), “bottom”, “left”, or “right”.

Example

As an example, the following shortcode displays a tooltip for a dark button with a badge.

markdown
{{< button color="dark" tooltip="Click on the inbox to view your unread messages" href="#" badge="99+" >}}
    Inbox
{{< /button >}}
Last updated: February 12, 2023 • Upgrade to docs v0.9 (2caaad8)