mirror of
https://github.com/gethinode/hinode.git
synced 2025-10-18 07:23:09 +00:00
47 lines
2.0 KiB
Markdown
47 lines
2.0 KiB
Markdown
---
|
|
author: "Mark Dumay"
|
|
title: "Button"
|
|
date: 2023-01-05
|
|
description: "Use the button shortcode to display a button with a hyperlink."
|
|
group: components
|
|
layout: docs
|
|
---
|
|
|
|
## 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:
|
|
|
|
| Argument | Required | Description |
|
|
|-------------|----------|-------------|
|
|
| href | No | Optional address for the button or hyperlink. Automatically assigned when using collapse. |
|
|
| 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". |
|
|
{.table}
|
|
|
|
## Example
|
|
|
|
As an example, the following shortcode displays a tooltip for a dark button with a badge.
|
|
|
|
```html
|
|
{{</* button color="dark" tooltip="Click on the inbox to view your unread messages" href="#" badge="99+" */>}}
|
|
Inbox
|
|
{{</* /button */>}}
|
|
```
|
|
|
|
The result looks like this:
|
|
|
|
{{< button color="dark" tooltip="Click on the inbox to view your unread messages" href="#" badge="99+" >}}
|
|
Inbox
|
|
{{< /button >}}
|