AlertBanner

Organism

Sayfa düzeyinde bilgi, uyarı veya hata mesajı. role="alert" ile ekran okuyucular için duyurulur. dismissible özelliği eklenebilir.

Props EditorInteractive
<AlertBanner
  title="System update"
  message="A new version is available. Please refresh the page."
  dismissible
/>

Info

Preview
Code
<AlertBanner variant="info" title="System update" message="A new version is available." dismissible />

Success

Preview
Code
<AlertBanner variant="success" message="Profile updated successfully." dismissible />

Warning

Preview
Code
<AlertBanner variant="warning" title="Maintenance window" message="The service will be unavailable from 2–4 AM UTC." />

Error

Preview
Code
<AlertBanner variant="error" title="Something went wrong" message="Unable to load the resource. Please try again." />

With CTA action

Preview
Code
<AlertBanner variant="warning" title="Your plan is expiring" message="Upgrade before your trial ends."
  action={{ label: 'Upgrade now', onClick: handleUpgrade }} dismissible />

Link CTA (action.href)

Preview
Code
<AlertBanner variant="info" title="Documentation updated" message="New guides are available."
  action={{ label: 'Read docs', href: '/docs/api' }} />

Custom icon

Preview
Code
<AlertBanner variant="info" message="Custom icon override." icon={<RocketIcon />} />
Sourcemodules/ui/AlertBanner.tsx