Alerts

The props passed to an alert action's onClick handler or component.

Signature

interface AlertActionContext<TResponse = any> {    data: TResponse;    dismiss: () => void;}

data

propertyTResponse

dismiss

property() => void

@vendure/dashboard Sourcev3.6.0

Defines an alert action. Either provide an onClick handler (rendered as a default button with the given label), or a component for full control over rendering and hook access.

Signature

type DashboardAlertAction<TResponse = any> = | {          label: string;          onClick: (args: AlertActionContext<TResponse>) => void | Promise<any>;          component?: never;      }    | {          label?: string;          onClick?: never;          /**           * @description           * A React component to render as the action. This is useful when           * the action needs access to React hooks (e.g. `useNavigate` from TanStack Router).           *           * The component receives the alert `data` and a `dismiss` function as props.           *           * @since 3.6.0           */          component: ComponentType<AlertActionContext<TResponse>>;      }

@vendure/dashboard Sourcev3.3.0

Allows you to define custom alerts that can be displayed in the dashboard.

Signature

interface DashboardAlertDefinition<TResponse = any> {    id: string;    title: string | ((data: TResponse) => string);    description?: string | ((data: TResponse) => string);    severity: AlertSeverity | ((data: TResponse) => AlertSeverity);    check: () => Promise<TResponse> | TResponse;    shouldShow: (data: TResponse) => boolean;    recheckInterval?: number;    actions?: Array<DashboardAlertAction<TResponse>>;}

id

propertystring

A unique identifier for the alert.

title

propertystring | ((data: TResponse) => string)

The title of the alert. Can be a string or a function that returns a string based on the response data.

description

propertystring | ((data: TResponse) => string)

The description of the alert. Can be a string or a function that returns a string based on the response data.

severity

propertyAlertSeverity | ((data: TResponse) => AlertSeverity)

The severity level of the alert.

check

property() => Promise<TResponse> | TResponse

A function that checks the condition and returns the response data.

shouldShow

property(data: TResponse) => boolean

A function that determines whether the alert should be rendered based on the response data.

recheckInterval

propertynumber

The interval in milliseconds to recheck the condition.

actions

propertyArray<DashboardAlertAction<TResponse>>

Optional actions that can be performed when the alert is shown.

Each action is either a simple onClick handler (rendered as a default button with the given label), or a component for full control over rendering and access to React hooks.

Was this chapter helpful?

Report Issue

Edited Mar 18, 2026·Edit this page