A banner component for displaying important information, alerts, or notifications.

Demo

Code

Information

This is an informational message.

Success

Your changes have been saved.

Warning

Please review your information carefully.

Error

Something went wrong. Please try again.

Installation

lunar add banner

Usage

import { Banner } from '@/components/ui/banner';

Basic Usage

<Banner
title="Information"
description="This is an informational message."
/>

Variants

// Default
<Banner
variant="default"
title="Default Banner"
description="This is a default banner."
/>
 
// Info
<Banner
variant="info"
title="Did you know?"
description="You can customize the appearance of banners."
/>
 
// Success
<Banner
variant="success"
title="Success!"
description="Your changes have been saved."
/>
 
// Warning
<Banner
variant="warning"
title="Warning"
description="Please review your information carefully."
/>
 
// Destructive/Error
<Banner
variant="destructive"
title="Error"
description="Something went wrong. Please try again."
/>

Dismissible

Allow users to dismiss the banner:

const [showBanner, setShowBanner] = useState(true);
 
{showBanner && (
<Banner
  variant="info"
  title="New Feature"
  description="Check out our latest update!"
  dismissible
  onDismiss={() => setShowBanner(false)}
/>
)}

Custom Icon

Replace the default icon:

import { Sparkles } from 'lucide-react-native';
 
<Banner
variant="info"
title="Pro Tip"
description="Use keyboard shortcuts to speed up your workflow."
icon={<Sparkles size={20} color="#3b82f6" />}
/>

Without Icon

Hide the icon entirely:

<Banner
variant="default"
title="Notice"
description="This banner has no icon."
showIcon={false}
/>

With Custom Content

Add any content to the banner:

<Banner variant="warning" title="Subscription Expiring">
<View className="mt-2">
  <Text className="text-yellow-900 dark:text-yellow-100">
    Your subscription expires in 3 days.
  </Text>
  <Button
    variant="outline"
    size="sm"
    className="mt-2"
    onPress={renewSubscription}
  >
    Renew Now
  </Button>
</View>
</Banner>

API Reference

Prop	Type	Default	Description
`variant`	`'default' \| 'info' \| 'success' \| 'warning' \| 'destructive'`	`'default'`	Visual variant
`title`	`string`	—	Banner title
`description`	`string`	—	Banner description
`children`	`ReactNode`	—	Custom content
`icon`	`ReactNode`	—	Custom icon
`showIcon`	`boolean`	`true`	Show/hide icon
`dismissible`	`boolean`	`false`	Allow dismissal
`onDismiss`	`() => void`	—	Callback when dismissed
`className`	`string`	—	Additional classes

Banner