Product Logo

Alert

Alert component for displaying important messages to users.

import { Alert } from '@document-writing-tools/kernux-react';
 
<Alert
  type="info"
  title="Information"
  content="Please review the following information."
/>
 
<Alert
  type="success"
  title="Success!"
  content="Your changes have been saved."
  href="/dashboard"
  linkText="Go to Dashboard"
/>
 
<Alert type="warning" />  {/* Uses default title */}
<Alert type="danger" content="Something went wrong." />

Props:

  • type?: "info" | "success" | "warning" | "danger" - Alert type (default: “info”)
  • title?: string - Alert title (uses default titles if not provided)
  • content?: string - Alert content message
  • href?: string - Optional link URL
  • linkText?: string - Link text when href is provided
  • Extends all standard HTML div element props

Default Titles:

  • info: “Hinweis”
  • success: “Erfolg”
  • warning: “Warnung”
  • danger: “Fehler”