Feedback

Alert

Inline status box with info, success, warning, and error variants.

Element: <div>
Module: @basenative/components
Function: renderAlert

Quick start

Import the render function and call it from your server template.

import { renderAlert } from '@basenative/components';

renderAlert('Saved.', { variant: 'success' });

Examples

Each block is a real server render — no mockups, no virtual DOM.

Variants

Info, success, warning, error. The error variant is dismissible.

Live render

This is an informational message.

Operation completed successfully.

Proceed with caution.

Something went wrong.

Source

renderAlert('This is an informational message.', { variant: 'info' })
renderAlert('Operation completed successfully.', { variant: 'success' })
renderAlert('Proceed with caution.',             { variant: 'warning' })
renderAlert('Something went wrong.',             { variant: 'error', dismissible: true })

Dismissible queue

Click "Add alert" to push a new dismissible alert into the stack.

Live render

Source

const counter = signal(0);

// renderAlert() is a server helper; in the browser the alert markup is built inline.
push.onclick = () => {
  counter.set(counter() + 1);
  stack.insertAdjacentHTML(
    'afterbegin',
    '<div data-bn="alert" data-variant="info" role="status">' +
      '<span data-bn="alert-content">Alert #' + counter() + ' just landed.</span>' +
      '<button data-bn="alert-dismiss" type="button" aria-label="Dismiss">×</button>' +
      '</div>',
  );
};

Options

Arguments accepted by renderAlert().

renderAlert option reference
Option	Type	Default	Description
`content`	`string`	`—`	Message body.
`variant`	`'info' \| 'success' \| 'warning' \| 'error'`	`'info'`	Status color.
`dismissible`	`boolean`	`false`	Adds a close button.