Show a notification with an action

const comment = () => {
  const uuid = TemporaryNotification.show(
    "Edna Mode commented on your assigned case.",
    {
      actionText: "View",
      action: () => {
        TemporaryNotification.dismiss(uuid);
      },
    },
  );
};

<GoabTemporaryNotificationCtrl />
<GoabButton onClick={comment}>Comment</GoabButton>

comment(): void {
  const uuid = TemporaryNotification.show(
    "Edna Mode commented on your assigned case.",
    {
      actionText: "View",
      action: () => {
        TemporaryNotification.dismiss(uuid);
      },
    },
  );
}

<goab-temporary-notification-ctrl></goab-temporary-notification-ctrl>

<goab-button (onClick)="comment()">Comment</goab-button>

const commentBtn = document.getElementById("comment-btn");
let currentUuid = null;

function showNotification(message, opts = {}) {
  const uuid = crypto.randomUUID();
  document.body.dispatchEvent(
    new CustomEvent("msg", {
      composed: true,
      bubbles: true,
      detail: {
        action: "goa:temp-notification",
        data: { message, uuid, type: "basic", duration: "short", ...opts },
      },
    }),
  );
  return uuid;
}

function dismissNotification(uuid) {
  document.body.dispatchEvent(
    new CustomEvent("msg", {
      composed: true,
      bubbles: true,
      detail: {
        action: "goa:temp-notification:dismiss",
        data: uuid,
      },
    }),
  );
}

commentBtn.addEventListener("_click", () => {
  currentUuid = showNotification("Edna Mode commented on your assigned case.", {
    actionText: "View",
    action: () => {
      dismissNotification(currentUuid);
    },
  });
});

<goa-temp-notification-ctrl></goa-temp-notification-ctrl>

<goa-button version="2" id="comment-btn">Comment</goa-button>

Show a temporary notification with an action button for user interaction.

When to use

Use this pattern when:

Users need to take action in response to a notification
Providing a quick way to navigate to related content
Showing activity notifications that users may want to respond to
The action should dismiss the notification when clicked

Considerations

Use actionText to set the button label in the notification
The action callback receives the notification UUID for dismissal
Use TemporaryNotification.dismiss(uuid) to close the notification programmatically
Keep action text short and clear (e.g., “View”, “Undo”, “Open”)
Consider what happens if the user doesn’t click the action before auto-dismiss

View old example docs