Alert Banner

AlertBanner is an inline notification card for feedback states — a colored status icon badge, a title and description, an optional dismiss button, and optional action buttons. It is non-modal — it lives in the page flow. Use it for form validation results, server errors, status updates, and other user-facing messages. The correct status icon (check / info / warning / error) is built in per variant — you don't pass one.

Installation

pnpm add @infinitibit_gmbh/ui @infinitibit_gmbh/theme-default

Usage

import '@infinitibit_gmbh/theme-default/theme.css';
import '@infinitibit_gmbh/ui/styles.css';

import { AlertBanner } from '@infinitibit_gmbh/ui';

export function Example() {
  return (
    <AlertBanner
      variant="success"
      title="Changes saved"
      description="Your settings have been updated."
    />
  );
}

Dismissible

Provide an onDismiss callback to render a dismiss button. The component has no internal visibility state — hide it in the parent based on the callback.

API

Prop	Type	Default	Description
variant	'success' | 'info' | 'warning' | 'error'	'info'	Color scheme and semantic meaning
title	string	—	Primary message (required)
description	string	—	Supporting detail below the title
icon	ReactNode	per-variant	Overrides the built-in status icon; pass null to hide it
actions	ReactNode	—	Action buttons, shown bottom-right (e.g. Buttons)
onDismiss	() => void	—	If provided, renders a dismiss button
className	string	—	Extra class on the root element

All other <div> props are forwarded.

Accessibility

• error and warning variants render with role="alert" (assertive — announced immediately).
• success and info variants render with role="status" (polite — announced when idle).
• The dismiss button has aria-label="Dismiss alert" and is keyboard-accessible.
• The built-in status icons are aria-hidden (the title conveys meaning); a custom icon you pass should be too.