Skip to content
nexubDesign System
v2.4.0

Components · Feedback

Alert

StableSince v0.0.1

Inline contextual message with optional title, icon, and dismiss action.

import { Alert } from '@nexub/react';

Usage

Use it for

  • Communicating system status, errors, or success after an action

  • Showing inline validation feedback inside a form

  • Warning the user about a potentially risky operation

  • Providing contextual information relevant to the current page

Use something else for

  • Transient messages — use Toast for ephemeral notifications

  • Blocking the user for a required decision — use AlertDialog

  • Marketing or promotional messaging

  • Replacing empty states — use EmptyState instead

Examples

Default

Tones

Dismissible

Props

Props
PropTypeDefaultDescription
tone'neutral' | 'info' | 'success' | 'warning' | 'danger''neutral'Semantic colour tone of the alert.
titlestring—Bold title rendered at the top of the alert.
iconReactNode—Custom icon rendered to the left of the content.
actionReactNode—Action element (e.g. a button) rendered beside the content.
onClose() => void—When provided, renders a close button that calls this handler.