Skip to main content

Notification

Overview​

The Notification component is a Bulma-styled alert/message area for providing feedback, warnings, or information to users.

It supports color themes, light variants, an optional close (delete) button, custom content, and all Bulma helper props for spacing, etc.

info

Notifications are perfect for status updates, alerts, and dismissible feedback in your UI.

Import​

import {
  Notification,
  NotificationContainer,
  notification,
} from '@allxsmith/bestax-bulma';

Usage​

Default Notification​

The default usage of the Notification component displays a simple alert box for status messages, feedback, or information. Use this for general notifications that don't require color coding.

<Notification>This is a default notification.</Notification>

Primary Notification​

To emphasize important messages, set the color prop to primary. This applies the Bulma primary color styling, making the notification stand out for high-priority information. Use color with values like primary, info, success, warning, or danger to match the context of your message.

<Notification color="primary">This is a primary notification.</Notification>

Light Variant​

For a softer, less prominent notification, add the isLight prop. This creates a pastel version of the chosen color, ideal for subtle alerts or background information that should not dominate the interface but still be color-coded.

<Notification color="primary" isLight>
  This is a light primary notification.
</Notification>

You can use the color prop with values like success, warning, danger, info, or link to visually differentiate notifications based on their purpose. This helps users quickly recognize the type of message being displayed.

<>
  <Notification color="success">This is a success notification.</Notification>
  <Notification color="warning">This is a warning notification.</Notification>
  <Notification color="danger">This is a danger notification.</Notification>
  <Notification color="info">This is an info notification.</Notification>
  <Notification color="link">This is a link notification.</Notification>
</>

With Dismiss Button​

To make notifications dismissible, set the hasDelete prop to show a close button. Combine with the onDelete callback to control visibility, such as hiding the notification when the button is clicked. This pattern is useful for temporary alerts or feedback that users can clear from the interface.

function example() {
  const [visible, setVisible] = React.useState(true);

  return (
    <>
      {visible && (
        <Notification hasDelete onDelete={() => setVisible(false)}>
          Click the delete button to dismiss this notification.
        </Notification>
      )}
    </>
  );
}

With Margin​

You can apply Bulma helper props such as m (margin) directly to the Notification component. For example, m="4" adds a margin of 4 units, allowing you to control spacing around notifications for better layout and visual separation.

<Notification m="4">This notification has a margin.</Notification>

Custom Content​

The Notification component supports any custom content as its children. You can include elements like <strong>, links, or other inline components to create rich, informative messages tailored to your application's needs.

<Notification color="warning">
  <Strong>Warning!</Strong> This notification contains{' '}
  <Link href="#">custom content</Link>.
</Notification>

Programmatic API​

To show a notification from anywhere in your app, not just where you render one, use the notification API. It stacks the same Bulma notification over the page and dismisses it on its own. For the toast look instead, use toast.

Setup​

Render NotificationContainer once, near your app root:

src/App.tsx
import { NotificationContainer } from '@allxsmith/bestax-bulma';

function App() {
  return (
    <>
      <YourRoutes />
      <NotificationContainer position="top-right" />
    </>
  );
}

The container's position (top-left, top, top-right, bottom-left, bottom, or bottom-right) places every notification shown without one. Pass position to notification.show() to put a notification somewhere else, and the container keeps a separate stack at each position in use. Queued notifications share one queue whatever their position, so a queued notification waits for the one on screen even when it's headed somewhere else.

API Methods​

import { notification } from '@allxsmith/bestax-bulma';

// Show a colored notification
notification.success('Changes saved');
notification.danger('Something went wrong');
notification.warning('Please review your changes');
notification.info('A new version is available');

// Show with options
notification.show({
  message: 'Custom notification',
  color: 'primary',
  isLight: true,
  duration: 5000,
});

// Show one away from the container's position
notification.show({ message: 'Upload finished', position: 'bottom-left' });

// Queued notifications display one at a time (FIFO)
notification.show({ message: 'Step 1', queue: true });
notification.show({ message: 'Step 2', queue: true });

// Keep one open until you close it
const id = notification.show({ message: 'Uploading…', indefinite: true });
notification.close(id);

// Close all notifications
notification.closeAll();

Each helper takes the message first and any other options second.

Accessibility​

  • Delete button: Includes aria-label="Close notification" for screen readers.
  • Keyboard: The delete button is focusable and can be activated by keyboard.
  • Content: Use semantic HTML within the notification for best accessibility.
  • Announcements: A notification shown through notification announces its message. danger and warning announce themselves: the message carries role="alert" with aria-live="assertive", which screen readers reliably announce even though it arrives with its text. The rest are announced politely through a visually hidden role="status" region that NotificationContainer keeps in the page from the moment it mounts, even with nothing showing, because a polite region that arrives already holding its text often isn't announced. A moment after one of those notifications appears, its message is written into the region, then cleared again shortly after.
  • Testing: A polite notification's message doesn't carry role="status", so getByRole('status') finds the container's region rather than the notification. Query the message text or .notification instead. A count or text Badge is a role="status" node too, so with both on the page getByRole('status') matches more than one: find the badge by its accessible name, or use getAllByRole. While a message is in the region, the page also holds a second copy of its text, so a test that advances the clock past the announcement and then looks the message up by text can find both, and can still find the region's copy for a moment after the notification closes. Scope that query to the notification, for example with within.
tip

Always provide clear, actionable text inside notifications.

  • Delete: The close button used in notifications.
  • Helper Props: Bulma helper props for spacing, color, etc.

Additional Resources​

Props​

PropTypeDefaultDescription
classNamestring—Additional CSS classes to apply.
colorBulma color—Bulma color modifier for the notification (renders is-<color>). Only primary, link, info, success, warning, danger, black, white, light, and dark have shipped CSS for .notification. Every other value the union accepts emits a class no CSS rule matches, so the notification renders unstyled; those log a console warning in development and will be removed from this union in the next major version.
textColorBulma color | 'inherit' | 'current'—Text color helper.
isLightbooleanfalseUse the light color variant.
hasDeletebooleanfalseShows a close (delete) button in the notification. It renders type="button", so it does not submit a form around it.
onDelete() => void—Callback fired when the delete button is clicked.
childrenReact.ReactNode—Content inside the notification.
...All standard <div> attributes and Bulma helper props—See Helper Props

CSS & Sass Variables​

Notification registers these variables on its own .notification element. Override them there (or via className) — a value set on an ancestor is only inherited, and loses to the component-level declaration. See Theme.

CSS VariableSass VariableDefault
--bulma-notification-h—var(--bulma-scheme-h)
--bulma-notification-s—var(--bulma-scheme-s)
--bulma-notification-background-l—var(--bulma-background-l)
--bulma-notification-color-l—var(--bulma-text-strong-l)
--bulma-notification-code-background-color$notification-code-background-colorvar(--bulma-scheme-main)
--bulma-notification-radius$notification-radiusvar(--bulma-radius)
--bulma-notification-padding$notification-padding1.375em 1.5em