Alert

Inline status messages and a React toast provider for the whole app.

import { ... } from '@corndev/ui-notifications'

Your changes were saved successfully.

Low disk spaceYou have less than 500 MB remaining.

Payment failed. Please check your card details.

Your plan resets on the 1st of each month.

A new version is available. Click dismiss to hide this.

HTML

<div class="corn-alert" data-type="info" role="alert">
  <div class="corn-alert-inner">
    <div class="corn-alert-content">
      <p class="corn-alert-title">Heads up</p>
      <p class="corn-alert-message">Your trial ends soon.</p>
    </div>
    <button class="corn-alert-close" aria-label="Dismiss">&times;</button>
  </div>
</div>

Classes

Class
`.corn-alert`
`.corn-alert-inner`
`.corn-alert-icon`
`.corn-alert-title`
`.corn-alert-content`
`.corn-alert-message`
`.corn-alert-close`

Attributes

Attribute	Values
`data-dismissed`	`present or absent`
`data-type`	`success\|warning\|danger\|info`

Vanilla JS

Required for behaviour — adds builds the inner markup and wires the dismiss button.

import { createAlert } from '@corndev/ui-notifications';
import '@corndev/ui/theme';

const element = document.querySelector('#target');
const instance = createAlert(element, { /* options */ });

Options

Option	Type	Default	Description
`type`	`'default'\|'success'\|'warning'\|'danger'\|'info'`	`'default'`
`title`	`string`	`undefined`	Optional bold heading
`message`	`string`	`undefined`	Alert body text (overrides element’s existing text)
`closeable`	`boolean`	`false`	Show a dismiss button
`onClose`	`Function`	`undefined`	Called when the alert is dismissed

React

Alert — from @corndev/ui-notifications-react.

The body text is children in React, not a message prop. The component hides itself on dismiss, so no close() handle is needed.

Props

Prop	Type	Default	Description
`type`	`'default'\|'success'\|'warning'\|'danger'\|'info'`	`'default'`
`title`	`string`	`undefined`	Optional bold heading
`closeable`	`boolean`	`false`	Show dismiss button
`onClose`	`Function`	`undefined`	Called when dismissed
`className`	`string`	`undefined`
`children`	`React.ReactNode`	`required`	Alert body content

React usage

import { Alert } from '@corndev/ui-notifications-react';
import '@corndev/ui-notifications/styles';

<Alert type="success">Your changes were saved.</Alert>

Types

<Alert>Default message</Alert>
<Alert type="success">Operation completed successfully.</Alert>
<Alert type="warning">Please review before continuing.</Alert>
<Alert type="danger">Something went wrong. Please try again.</Alert>
<Alert type="info">Your plan resets on the 1st of each month.</Alert>

With title

<Alert type="danger" title="Payment failed">
  Your card was declined. Please check your details and try again.
</Alert>

Dismissible

<Alert type="info" closeable onClose={() => console.log('dismissed')}>
  A new version is available.
</Alert>

React toasts — NotificationProvider

Wrap your app with NotificationProvider once, then call useNotifications() anywhere inside it to show toasts.

// main.jsx
import { NotificationProvider } from '@corndev/ui-notifications-react';
import '@corndev/ui-notifications/styles';

<NotificationProvider position="top-right">
  <App />
</NotificationProvider>

// Inside any component
import { useNotifications } from '@corndev/ui-notifications-react';

function SaveButton() {
  const { show, dismiss, dismissAll } = useNotifications();

  return (
    <button onClick={() => show({ message: 'Saved!', type: 'success' })}>
      Save
    </button>
  );
}

Vanilla JS alert

import { createAlert } from '@corndev/ui-notifications';
import '@corndev/ui-notifications/styles';

const el = document.querySelector('#status');
const alert = createAlert(el, {
  type: 'warning',
  title: 'Low disk space',
  message: 'You have less than 500MB remaining.',
  closeable: true,
  onClose: () => console.log('dismissed'),
});

alert.close();
alert.destroy();