Banner
FeedbackStable
Persistent top-of-page notification for announcements, warnings, or promotional messages. Supports controlled visibility.
Quick Import
import { Banner } from "@cohere-ai/waypoint-ui/banner";Live Preview
Loading Banner...
Props
| Name | Type | Default | Description |
|---|---|---|---|
visible | boolean | - | Controlled visibility |
defaultVisible | boolean | true | Default visibility (uncontrolled) |
onClose | function | - | Called when the banner is dismissed |
inset | boolean | false | Adds horizontal padding |
bgColor | string | - | Override background color |
name (BannerIcon)* | IconName | - | Icon to display in the banner |
* Required prop
Examples
Basic Banner
Simple announcement banner with action and close
1 import { Banner, BannerTitle, BannerPrimaryAction, BannerClose } from '@cohere-ai/waypoint-ui/banner'; 2 3 <Banner> 4 <BannerTitle>We updated our privacy policy.</BannerTitle> 5 <BannerPrimaryAction>Learn more</BannerPrimaryAction> 6 <BannerClose /> 7 </Banner>
Controlled Banner
Banner with externally controlled visibility
1 import { Banner, BannerTitle, BannerClose } from '@cohere-ai/waypoint-ui/banner'; 2 3 const [visible, setVisible] = React.useState(true); 4 5 <Banner visible={visible} onClose={() => setVisible(false)}> 6 <BannerTitle>New features available!</BannerTitle> 7 <BannerClose /> 8 </Banner>
Additional Resources
Accessibility
Note: Dismiss button has accessible label via useUiLabels. Should be placed at the top of the page viewport.
Found an Issue?
If you've encountered a bug or have feedback about the Banner component, please report it to our team. Your feedback helps us improve Waypoint.
Available for all users • Issue will be created in Linear
Was this page helpful?
Your feedback helps us improve our documentation.
Need Help?
Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.