AlertBanner

Inline banner for success, error, warning, or info messages. Supports dismiss.

Variants

Deployment successful

v1.4.2 is now live.

Build failed

2 tests failed in CI pipeline.

API rate limit approaching

80% of monthly quota used.

New features available

Check the changelog for details.

import { AlertBanner } from '@canarist/ui'

<AlertBanner variant="success" title="Deployment successful" description="v1.4.2 is now live." />
<AlertBanner variant="error" title="Build failed" description="2 tests failed." />
<AlertBanner variant="warning" title="Rate limit approaching" description="80% of quota used." />
<AlertBanner variant="info" title="New features available" />

Dismissible

System maintenance scheduled

Downtime window: Saturday 02:00–04:00 UTC.

function Example() {
  const [visible, setVisible] = useState(true)
  if (!visible) return null
  return (
    <AlertBanner
      variant="info"
      title="System maintenance scheduled"
      description="Downtime: Saturday 02:00–04:00 UTC."
      onDismiss={() => setVisible(false)}
    />
  )
}

Reference

Prop	Type	Default	Description
variant	'success' \| 'error' \| 'warning' \| 'info'	'info'	Color and icon style.
title	string	—	Bold heading text.
description	string	—	Optional secondary text below the title.
onDismiss	() => void	—	If provided, renders a dismiss (×) button.
className	string	—	Additional CSS classes.