Action Button

The Action Button component is used to create a button that can perform various actions such as opening a QR code modal, redirecting to a link, or scrolling to a specific element on the page.

Background:

Button QR Modal:

QUYÊN GÓP NGAY

Button QR all-in-one Modal:

Quyên góp trực tiếp

Thanh toán qua mọi ứng dụng

Button ref link:

XEM NGAY

Button with run a function:

HIỆN THÔNG BÁO

Button scroll to element:

XEM VÍ DỤ

Usage

import { ActionButton } from "@momo-webplatform/mobase";

<ActionButton
  newTab
  dialogQrProps={{
    qrLink: "https://page.momoapp.vn/hhUEFfcGDcf",
    title: "Chuyển tiền ngay",
    shortTitle: "Quét mã để tải ứng dụng hoặc Chuyển tiền ngay"
  }}
>
  QUYÊN GÓP NGAY
</ActionButton>
<ActionButton action="https://www.momo.vn/gioi-thieu-momo" newTab>XEM NGAY</ActionButton>

Example

Example

Action Button with QR Modal

• Button with QR modal that opens when clicked. The QR modal contains a QR code that can be scanned to download the app or perform a specific action in desktop. In mobile devices, button click will redirect to the QR link.
• To use this feature, you need to pass the dialogQrProps prop to the ActionButton component. The dialogQrProps defined from DialogQr component.

Background:

Button QR Modal:

QUYÊN GÓP NGAY

Button QR all-in-one Modal:

Quyên góp trực tiếp

Thanh toán qua mọi ứng dụng

Action Button with ref link

Button with a link that opens in a new tab when clicked. You can pass the link to the action prop.

Action Button with run a function

Button with run a function when clicked. You can pass the function to the action prop.

Action Button with scroll to element

Button with scroll to element when clicked. You can pass the element id name with start # to the action prop and offset to the offset prop.

API Reference

ActionButton component using Button and DialogQr component and supports all of its props.

⚠️ Note:
The ActionButton component can either display a QR code modal or handle an action on click, but not both. If both dialogQrProps and action props are provided, the dialogQrProps component will take precedence.