Bannerfeedback
Page or section message with five tones, a required title, at most two actions, an opt-in dismissible variant and a flush layout.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/bannerDefault
banner-demo.tsx
import { BANNER_TONES, Banner } from "@/components/ui/banner";
export default function BannerDemo() { return ( <div className="flex flex-col gap-3"> {BANNER_TONES.map((tone) => ( <Banner key={tone} tone={tone} title={`Banner ${tone}`} actions={[{ label: "View details", primary: true, href: "#details" }, { label: "Later" }]}> This message stays on the page until the cause is gone. </Banner> ))} </div> );}