Collaboration
Project Management
Finance
Banner
A banner is a full-width component that can be used to show a message and action to the user.
Installation
npx love-ui@latest add bannerUsage
import { Banner, BannerIcon, BannerTitle, BannerAction, BannerClose } from "@/components/banner"<Banner>
<BannerIcon>
<AlertCircle />
</BannerIcon>
<BannerTitle>Important update available</BannerTitle>
<BannerAction onClick={() => console.log("Update")}>Update now</BannerAction>
<BannerClose />
</Banner>Features
- Controlled and uncontrolled visibility state
- Customizable close handler
- Optional inset variant with rounded corners
- Composable API with Icon, Title, Action and Close components
- Customizable via className prop
- Adapts to primary color tokens
Examples
Inset
Your trial ends in 3 days. Add a payment method to stay live.
"use client";
import {
Banner,
BannerAction,
BannerClose,
BannerIcon,
BannerTitle,
} from "../../../../../packages/banner";
import { CircleAlert } from "lucide-react";
const Example = () => (
<Banner inset>
<BannerIcon icon={CircleAlert} />
<BannerTitle>Your trial ends in 3 days. Add a payment method to stay live.</BannerTitle>
<BannerAction>Update billing</BannerAction>
<BannerClose />
</Banner>
);
export default Example;
Different primary colors
Something's gone horribly wrong.
You're almost out of disk space.
You've been selected for a secret mission.
"use client";
import {
Banner,
BannerAction,
BannerClose,
BannerIcon,
BannerTitle,
} from "../../../../../packages/banner";
import { CircleAlert } from "lucide-react";
import type { CSSProperties } from "react";
const Example = () => (
<>
<div
className="w-full"
style={
{
"--primary": "oklch(0.637 0.237 25.331)",
"--primary-foreground": "oklch(0.971 0.013 17.38)",
} as CSSProperties
}
>
<Banner>
<BannerIcon icon={CircleAlert} />
<BannerTitle>
Something's gone <strong>horribly</strong> wrong.
</BannerTitle>
<BannerAction>Restart</BannerAction>
<BannerClose />
</Banner>
</div>
<div
className="w-full"
style={
{
"--primary": "oklch(0.705 0.213 47.604)",
"--primary-foreground": "oklch(0.98 0.016 73.684)",
} as CSSProperties
}
>
<Banner>
<BannerIcon icon={CircleAlert} />
<BannerTitle>You're almost out of disk space.</BannerTitle>
<BannerAction>Upgrade</BannerAction>
<BannerClose />
</Banner>
</div>
<div
className="w-full"
style={
{
"--primary": "oklch(0.723 0.219 149.579)",
"--primary-foreground": "oklch(0.982 0.018 155.826)",
} as CSSProperties
}
>
<Banner>
<BannerIcon icon={CircleAlert} />
<BannerTitle>You've been selected for a secret mission.</BannerTitle>
<BannerAction>Accept</BannerAction>
<BannerClose />
</Banner>
</div>
</>
);
export default Example;