AlertBanner

Use AlertBanner to notify a shopper and prompt them to take action. It renders a dismissible banner with a message, an optional icon, and an optional action button.

Import

import { AlertBanner } from '@dropins/tools/components.js';

Props

Prop	Type	Req?	Description
variant	'brand' | 'neutral' | 'success' | 'warning'	Yes	The banner variant.
message	VNode	Yes	The banner message.
onDismiss	() => void	Yes	Handler called when the shopper dismisses the banner.
icon	VNode<HTMLAttributes<SVGSVGElement>>	No	The banner icon.
action	{ label: string; onClick: (event: Event) => void }	No	Optional action with a label and an onClick handler.

AlertBanner also accepts standard <div> HTML attributes (for example, className), except icon and action.

Example

Render a banner with a message, an icon, an action, and a dismiss handler. Build the message and icon VNodes with h.

import { AlertBanner, Icon, provider } from '@dropins/tools/components.js';
import { h } from '@dropins/tools/preact.js';

await provider.render(AlertBanner, {
  variant: 'success',
  icon: h(Icon, { source: 'InfoFilled' }),
  message: h('span', {}, 'Your changes were saved.'),
  action: {
    label: 'Undo',
    onClick: () => yourUndoChanges(),
  },
  onDismiss: () => yourHideBanner(),
})(document.querySelector('.alert-banner'));

Related

• InLineAlert — for inline messages tied to a specific field or section.
• Icon — pass an Icon as the icon prop.