AI Banner

The AI Banner is a themed banner component for areas of the platform that support both light and dark mode. Use AiBanner from @camp/banner whenever your feature area requires theming — it automatically adapts to the active theme via ThemeProvider. If your feature area is light mode only, use the Banner export instead. AiBanner and Banner are in the process of being consolidated into a single component.

Overview

Resources

Install


yarn add @camp/banner

Variations

Appearance

AiBanner supports six appearances for different message types. Unlike Banner, there is no ai or danger appearance — use destructive for error states.


import { AiBanner } from '@camp/banner';
 
<AiBanner
  appearance="warning"
  title="Warning Banner"
  description="This is a warning message with important information."
/>
 
<AiBanner
  appearance="destructive"
  title="Destructive 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/banner';
 
<AiBanner
  appearance="warning"
  title="Warning Without Icon"
  description="Warning banner with hideIcon enabled."
  hideIcon
/>;

With Dismiss Functionality

Banners can include a dismiss button by providing an onDismiss callback. The dismiss button’s accessible label is handled automatically via the platform’s translation system — no dismissLabel prop is needed.


import { AiBanner } from '@camp/banner';
 
<AiBanner
  appearance="info"
  title="Dismissible Banner"
  description="This banner can be dismissed by clicking the close button."
  onDismiss={() => console.log('Banner dismissed')}
/>;

With Custom Actions

Banners can include custom action buttons through the renderActions prop, which accepts a render function.


import styled from 'styled-components';
import { AiBanner } from '@camp/banner';
import { AiButton } from '@camp/ai-button';
 
const ActionsWrapper = styled.div`
  display: flex;
  gap: ${({ theme }) => theme.space['2']};
  margin-top: ${({ theme }) => theme.space['2']};
`;
 
<AiBanner
  appearance="upgrade"
  title="AI Recommendation Available"
  description="New AI-powered features are available to enhance your workflow."
  onDismiss={() => console.log('Banner dismissed')}
  renderActions={() => (
    <ActionsWrapper>
      <AiButton appearance="primary" size="small">
        Upgrade now
      </AiButton>
      <AiButton appearance="secondary" size="small">
        Learn more
      </AiButton>
    </ActionsWrapper>
  )}
/>;

Title Only

Both title and description are optional on AiBanner. When only a title is needed, omit the description prop.


import { AiBanner } from '@camp/banner';
 
<AiBanner appearance="info" title="AI insights are ready to review" />;

Description Only

Both title and description are optional on AiBanner. When only a description is needed, omit the title prop.


import { AiBanner } from '@camp/banner';
 
<AiBanner appearance="info" description="This banner only has a description without a title." />;

Title with actions

A banner can display a title with actions by providing a renderActions prop.


import { AiBanner } from '@camp/banner';
import { AiButton } from '@camp/ai-button';
 
<AiBanner
  appearance="upgrade"
  title="Upgrade available"
  renderActions={() => (
    <AiButton appearance="primary" size="small">
      Upgrade now
    </AiButton>
  )}
/>;

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
The dismiss button’s accessible label is provided automatically via the platform translation system (global:dismiss)
Icon meanings are conveyed through text content, not just visual appearance