AI Banner

The AI Banner component is designed to display actionable insights generated by or available via AI. This specialized banner variant maintains the same functionality as the standard banner while providing visual cues that indicate AI-powered content and recommendations.

Overview

Resources

Install


yarn add @camp/ai-banner

Variations

Appearance

The AI Banner supports all standard banner appearances, each suited for different types of AI-generated insights and notifications.


import { AiBanner } from '@camp/ai-banner';
 
<AiBanner
  appearance="warning"
  title="Warning Banner"
  description="This is a warning message with important information."
/>
 
<AiBanner
  appearance="destructive"
  title="Error Banner"
  description="This is an error message indicating something went wrong."
/>
 
<AiBanner
  appearance="info"
  title="Info Banner"
  description="This is an informational message with helpful details."
/>
 
<AiBanner
  appearance="educational"
  title="Educational Banner"
  description="This is an educational message to help users learn."
/>
 
<AiBanner
  appearance="success"
  title="Success Banner"
  description="This is a success message confirming a completed action."
/>
 
<AiBanner
  appearance="upgrade"
  title="Upgrade Banner"
  description="This is an upgrade message encouraging users to upgrade."
/>

Without Icons

Banners can be displayed without their default icons by setting the hideIcon prop to true.


import { AiBanner } from '@camp/ai-banner';
 
<AiBanner
  appearance="warning"
  title="Warning Without Icon"
  description="Warning banner with hideIcon enabled."
  hideIcon
/>;

With Dismiss Functionality

Banners can include a dismiss button that allows users to close the banner.


import { AiBanner } from '@camp/ai-banner';
 
<AiBanner
  appearance="warning"
  title="Dismissible Warning"
  description="This banner can be dismissed by clicking the close button."
  onDismiss={() => console.log('Banner dismissed')} // providing the onDismiss prop will automatically add a dismiss button to the banner
/>;

With Custom Actions

Banners can include custom action buttons through the renderActions prop.


import { AiBanner } from '@camp/ai-banner';
import { AiButton } from '@camp/ai-button';
 
<AiBanner
  appearance="upgrade"
  title="Upgrade Available"
  description="New features are available in the premium plan."
  onDismiss={() => console.log('Banner dismissed')}
  renderActions={() => (
    <div style={{ display: 'flex', gap: '8px', marginTop: '8px' }}>
      <AiButton appearance="primary" size="small">
        Upgrade Now
      </AiButton>
      <AiButton appearance="secondary" size="small">
        Learn More
      </AiButton>
    </div>
  )}
/>;

Content Variations

Banners can display with title only, description only, or both.


import { AiBanner } from '@camp/ai-banner';
 
{
  /* Title only */
}
<AiBanner appearance="warning" title="Warning: Title Only Banner" />;
 
{
  /* Description only */
}
<AiBanner appearance="info" description="This banner only has a description without a title." />;

Accessibility

Keyboard support

Use Tab key to move focus to interactive elements (dismiss button and custom actions)
Use Space or Enter key to activate buttons
Focus indicators are clearly visible on all interactive elements

The banner container has role="alert" to announce important content to screen readers
Dismiss button includes proper aria-label for screen reader users
Icon meanings are conveyed through text content, not just visual appearance