Banner

Banner Description

Source Code

Installation


pnpm dlx radianui@latest add banner

Usage

Imports

/components/ui/banner.tsx

import {
	Banner,
	BannerContent,
	BannerDescription,
	BannerIcon,
	BannerTitle,
} from "@/components/ui/banner"

Code

/components/ui/banner.tsx

<Banner
	variant="strong"
	color="primary"
	onClose={() => setBannerVisible(false)}>
	<BannerContent>
		<BannerIcon>
			<Sparkles />
		</BannerIcon>
 
		<BannerTitle>New Feature!</BannerTitle>
 
		<BannerDescription>Check it out</BannerDescription>
	</BannerContent>
</Banner>

Examples

Variants

Outline

This is a variant of banner component

Colors

Primary Banner

Success Banner

Error Banner

Floating Banner

I am an example of a Floating Banner

Black Friday Banner

Props

Name	Default	Values
variant	soft	strongoutlinesoftsoft-outline
color	primary	primaryneutralsuccesswarningerrorinfo
onClose	undefined	() => void