Intro

Custom Alert Using Actions

A simple, flexible toast alert you can call from anywhere. Install the package and a new action appears in your global actions section, callable from any workflow on any page.
Only the content is separate — message, title, type, duration and position. Everything visual lives in one optional style object. Any alert can still override position or anything else per call when it needs to be different. Sensible fallbacks for everything, swipe-to-dismiss, optional close button, and mobile-aware behavior baked Create a global formula that outputs your style object (background, text color, border, corner radius, typography, icons, and a default position) and bind it to every call — the whole project shares a single look, with the border automatically matching whatever background is in use.

Actions

  • customAlert

    This is the entire package. It's a custom alert that is triggered as an action.

    Arguments

    message
    Your alert message. Optional when a title is given; if both message and title are blank, a default message is shown.
    title
    An optional bold heading rendered above the message.
    type
    Alert type: info, success or error (case-insensitive). Default info. Selects the preset background color and icon — both overridable in the style object.
    duration
    Timeout in milliseconds before the alert auto-dismisses. Default 3000; 0 keeps the alert until it is swiped away or closed. Aliases accepted: delay, timeOut.
    position
    Where the alert appears, e.g. "top left", "bottom right". Partial values are completed: missing vertical defaults to top, missing horizontal to center. Wins over style.position when both are given.
    showCloseBtn
    true or false — show a close button on the alert. Default false. (The old closeButton input name is still accepted.)
    style
    Object or JSON string holding EVERY visual option: { position, bgColor, textColor, borderColor, infoBorderColor, successBorderColor, errorBorderColor, borderRadius, font, infoSvg, successSvg, errorSvg, closeButtonSvg }. Everything optional. position sets the default position (the separate position input overrides it). The border matches the background color exactly unless borderColor or a per-type border color is set. borderRadius accepts CSS shorthand; font is { family, titleWeight, titleSize, messageWeight, messageSize } with unitless sizes converted to rem. Recommended: define this object once as a global formula and bind it here on every call, so the whole project shares one look.
    Style example:
    {
    "position": "top center",
    "borderRadius": "10",
    "font": {
    "family": "Inter, sans-serif",
    "titleWeight": "600",
    "titleSize": "13",
    "messageWeight": "500",
    "messageSize": "14"
    },
    "closeButtonSvg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M18.667 5.333L5.333 18.667m0-13.334l13.334 13.334\"/></svg>",
    "showCloseBtn": true,
    "info": {
    "bgColor": "#0C0A09",
    "textColor": "#FCFCFC",
    "borderColor": "#0C0A09",
    "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><g fill=\"currentColor\"><path d=\"M22 12c0 4.714 0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12\" opacity=\".5\"/><path d=\"M7 16.75a.75.75 0 0 0 0 1.5h6a.75.75 0 0 0 0-1.5zm0-3.5a.75.75 0 0 0 0 1.5h9a.75.75 0 0 0 0-1.5zM22 5a3 3 0 1 1-6 0a3 3 0 0 1 6 0\"/></g></svg>"
    },
    "success": {
    "bgColor": "#09BC8A",
    "textColor": "#FCFCFC",
    "borderColor": "#09BC8A",
    "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><g fill=\"currentColor\"><path d=\"M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10\" opacity=\".5\"/><path d=\"M16.03 8.97a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l2.235-2.235L14.97 8.97a.75.75 0 0 1 1.06 0\"/></g></svg>"
    },
    "error": {
    "bgColor": "#C33149",
    "textColor": "#FCFCFC",
    "borderColor": "#C33149",
    "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><g fill=\"currentColor\"><path d=\"M12 3c-2.31 0-3.77 2.587-6.688 7.762l-.364.644c-2.425 4.3-3.638 6.45-2.542 8.022S6.214 21 11.636 21h.728c5.422 0 8.134 0 9.23-1.572s-.117-3.722-2.542-8.022l-.364-.645C15.77 5.587 14.311 3 12 3\" opacity=\".5\"/><path d=\"M12 7.25a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-1.5 0V8a.75.75 0 0 1 .75-.75M12 17a1 1 0 1 0 0-2a1 1 0 0 0 0 2\"/></g></svg>"
    }
    }

    Test it here

Open in editor
Built in Nordcraft The website builder for creative studios