Feedback

Notification Banner

A compact alert banner with an inline action.

Source

This is the component source that shadcn installs into a consuming project.

registry/default/notification-banner/notification-banner.tsx

import { ArrowRightIcon, BellIcon } from "lucide-react"

import {
  Alert,
  AlertAction,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert"
import { Button } from "@/components/ui/button"

type NotificationBannerCopy = {
  title: string
  description: string
  action: string
}

type NotificationBannerProps = {
  copy?: NotificationBannerCopy
}

const defaultCopy: NotificationBannerCopy = {
  title: "Registry build completed",
  description:
    "Seven components were generated and are ready to install from your preview domain.",
  action: "Review",
}

export function NotificationBanner({
  copy = defaultCopy,
}: NotificationBannerProps) {
  return (
    <Alert className="w-full max-w-2xl">
      <BellIcon />
      <AlertTitle>{copy.title}</AlertTitle>
      <AlertDescription>{copy.description}</AlertDescription>
      <AlertAction>
        <Button size="xs" variant="outline">
          {copy.action}
          <ArrowRightIcon data-icon="inline-end" />
        </Button>
      </AlertAction>
    </Alert>
  )
}