@tour-kit/announcementsHeadless
HeadlessBanner
HeadlessAnnouncementBanner: unstyled banner primitive with dismiss and action state exposed via render props for theming
HeadlessBanner
Unstyled banner bar that provides state and behavior through render props.
Additional Render Props
Prop
Type
Example
import { HeadlessBanner } from '@tour-kit/announcements/headless';
<HeadlessBanner
id="notice"
render={({ isVisible, config, dismiss, position, intent, sticky }) => {
if (!isVisible) return null;
return (
<div
className={`banner ${position} ${intent} ${sticky ? 'sticky' : ''}`}
role="banner"
>
<p>{config.title}</p>
{config.bannerOptions?.dismissable && (
<button onClick={() => dismiss()}>×</button>
)}
</div>
);
}}
/>