Banner
A full-width notice with an optional action and dismiss button.
Preview
Loading...
import { Banner } from "@/components/ui/Banner";
export function BannerDemo() {
return (
<Banner action={<button type="button">Review</button>} onDismiss={() => undefined}>
A new color scale is ready.
</Banner>
)Installation
Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces
pnpm dlx shadcn@latest add @aura/bannerManual
Install the following dependencies:
pnpm install @radix-ui/react-iconsCopy and paste the class names utility into your utils/class-names.ts file.
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Copy and paste the Banner component into your components/ui/Banner.tsx file.
"use client";
import * as React from "react";
import { Cross2Icon } from "@radix-ui/react-icons";
import { cn } from "@/utils/class-names";
function Banner({
className,
children,
action,
onDismiss,
}: {
className?: string;
children: React.ReactNode;
action?: React.ReactNode;
onDismiss?: () => void;
}) {
return (
<div
role="status"
data-slot="banner"
className={cn(
"flex items-center gap-1 border-b border-accent-7 bg-accent-3 px-1.5 py-1 text-gray-12",
className,
)}
>
<p className="m-0 flex-1">{children}</p>
{action}
{onDismiss ? (
<button
type="button"
aria-label="Dismiss banner"
className="inline-flex size-3 items-center justify-center rounded-sm hover:bg-accent-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-8"
onClick={onDismiss}
>
<Cross2Icon className="icon" />
</button>
) : null}
</div>
);
}
export { Banner };