Banner

ActiveCampaign’s static banners are persistent, non-obtrustive messages that sit inline with the page or modal content. They can be used for education, to let a user know that something in the system has changed, or to generally let the user know about a message that’s important to their workflow within ActiveCampaign.

Overview

Resources

Install


yarn add @camp/banner

Upgrading to Next Gen

🎨 Updated Color Palette & Style Refresh: Aligned styling with our refreshed brand standards, delivering a modernized and cohesive look and feel.

Migration steps

Update import path: Replace the old Banner imports with Banner from @camp/banner.
Update prop values

Actions: The actions prop can now only be passed as a render function, which may require an update depending on your previous implementation.
Description: The description prop should only be passed as a render function or a string, which may require an update depending on your previous implementation.
Appearance: The destructive appearance must be renamed to danger

Variations

Appearance

Below are the appearance variations available in Banner and the use case for each.

Info (default): Provides additional information to the user
Educational: Provides educational content, oftentimes linking to Learn or Help docs
Success: Indicates successful completion of an action
Upgrade: Indicates that additional functionality is available via upgrade
Warning: Indicates that something will become an error (or expire) soon
Danger: Indicates an error
AI: Indicates actionable insights generated by or available via AI
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...


import {Banner} from '@camp/banner';
 
<Banner
  title="This is a title"
  description="Lead Scoring is a flexible, powerful tool that empowers marketers to apply a points system for contact action, or inaction, based on what's important to an organization. Read our lead scoring guide, or listen to our podcast."
  appearance="success"
  />
    ```
 
### Size
Banners come in two sizes, the `default` medium size and a `small` size. Which size of the button to use is based on both the importance of the communication as well as the context of where it is placed. In most cases, the medium banner should be used, but the small banner is a good alternative for:
* Banners inside components, such as modals, drawers, and cards
* Paired with smaller blocks of content on the page that are lower in hierarchy
The `small` banner does not have a dismiss indicator or button actions. `small` is a boolean.
<ComponentExample>
<Banner
  description="Lead Scoring is a flexible, powerful tool that empowers marketers to apply a points system for contact action, or inaction, based on what's important to an organization. Read our lead scoring guide, or listen to our podcast."
  small
/>
</ComponentExample>
```jsx
<Banner
  description="Lead Scoring is a flexible, powerful tool that empowers marketers to apply a points system for contact action, or inaction, based on what's important to an organization. Read our lead scoring guide, or listen to our podcast."
  small
/>

Inline (no description)

In this case, elements in the Banner, including any action buttons, will be automatically aligned inline. This appearance can occur with or without actions and with or without Dismiss.


<Banner dismissLabel="Close" title="This is a title" />

Usage

Best practices

A maximum of 2 actions can be placed in the banner, although it is recommended to keep it consolidated to a single action to narrow focus of the banner’s purpose. Rather than any “dismiss”-type button actions, use the dismiss indicator in the corner instead.
Banners should not be dismissable if they have any critical information or important information that the user might need. If it’s something that they wouldn’t want to dismiss on accident, it should not have a dismiss indicator. Warning and destructive banners should never have a dismiss indicator.
Banners should be placed above their area of context, rather than below or between blocks of content. A banner should appear until it’s conditions are met and shouldn’t overstay it’s welcome, for example, if a user has successfully onboarded a new feature, they should no longer see the related educational banner.

Content guidelines

Banner titles are written clearly in sentence case and in complete sentences, with no punctuation at the end. Write banner titles so that they can be easily translated into different languages. Banner descriptions should be written in full and complete sentences, with punctuation at the end.

Accessibility

Keyboard support

When there is a dismiss indicator, move focus to it using the tab key
When there are banner actions, move focus to them using the tab key
On either the dismiss indicator or banner actions, use the space or enter key to perform action

Labels

The developer should set headingLevel for appropriate level within the page (the default is h3). This allows you to ensure the heading level makes sense in the flow of the document.
The developer should set dismissLabel to provide a translated aria-label for the dismiss “X” button. Required if onDismiss is provided.

Similar components

Toast

Provides simple messages about an operation in a small popup.