Alert

WCAG-compliant alert component for displaying important messages with proper semantic roles, optional titles, icons, and closable functionality.

---

Usage

Basic usage

import { Alert } from '@nofinite/nui';

<Alert type="info">This is an informational message.</Alert>;

With title and closable

<Alert
  type="error"
  title="Error occurred"
  closable
  onClose={() => console.log('closed')}
>
  Failed to update the record.
</Alert>

---

Variants

Alert supports different visual types for message importance:

<Alert type="info" />
<Alert type="success" />
<Alert type="warning" />
<Alert type="error" />

Available variants:

• info – non-urgent informational messages.
• success – confirmation or success messages.
• warning – important warning, urgent.
• error – critical error messages, urgent.

Guidelines:

• Use info for general information.
• Use success for successful actions or confirmations.
• Use warning for cautionary messages.
• Use error for critical errors that require immediate attention.

---

Sizes

Alert does not have explicit size props. Padding and font sizes are controlled via design tokens. Custom styles can be applied via className.

<Alert className="custom-alert">Custom styled alert</Alert>

---

States

<Alert closable onClose={handleClose} />

States explained:

• closable – renders a close button and triggers onClose when clicked.
• disabled – not natively supported; can be styled via className if required.
• No loading or error states beyond the type variants.

---

Native Props / Composition

Alert forwards native HTML attributes to the root element:

<Alert
  aria-label="Important alert"
  data-testid="alert-1"
  onClick={() => console.log('clicked')}
>
  Message content
</Alert>

Supports className for custom styling:

<Alert className="my-custom-alert">Styled alert</Alert>

---

Props

Prop	Type	Default	Description
type	"info" | "success" | "warning" | "error"	info	Defines alert variant and semantic role
title	string	—	Optional title displayed above content
children	React.ReactNode	—	Content of the alert
closable	boolean	false	Whether the alert can be closed
onClose	() => void	—	Callback triggered when alert is closed
className	string	""	Additional CSS class names for custom styling
...rest	React.HTMLAttributes<HTMLDivElement>	—	Any other native div attributes

---

Behavior Notes

• Uses semantic roles for accessibility:

  • type="error" / warning → role="alert" (urgent)
  • type="info" / success → role="status" (non-urgent)

• closable renders a button with aria-label="Close alert".

• Internal styling uses design tokens and can be overridden via className.

<Alert
  type="warning"
  title="Caution"
  closable
  onClose={() => console.log('closed')}
/>

---

Accessibility

• Renders as <div role="alert"> or <div role="status"> depending on type.

• Keyboard support:

  • Close button is focusable via Tab.
  • Activate close action using Enter or Space.

• Alerts convey urgency through semantic roles.

• Screen readers announce role="alert" immediately.

Example:

<Alert type="error" closable onClose={handleClose} aria-label="Error alert">
  Error occurred
</Alert>

---

Layout

• Alert is a block-level container.
• Uses flex layout for content and optional close button.
• Expands to the width of its container by default.

<Alert style={{ width: '100%' }}>Full-width alert</Alert>

---

Best Practices

Do

• Use Alert for user-facing messages that require attention.
• Choose the correct type based on urgency.
• Provide a clear and concise title for important messages.
• Ensure closable alerts have an onClose handler.

Don’t

• Do not use Alert for layout or spacing purposes.
• Avoid placing unrelated or excessive content inside an alert.
• Do not hide critical messages behind multiple interactions.