Banner

A full-width message strip with an optional title, leading icon, and dismiss button.

Usage


import { Banner } from '@mav-labs-inc/mavkit-react'
 
<Banner variant="warning" dismissible onDismissed={onDismiss}>
  Your trial ends in 3 days.
</Banner>
 
<Banner variant="danger" title="Payment Failed" icon={<svg className="banner-icon">...</svg>}>
  Your subscription could not be renewed.
</Banner>

Example

Props

Banner accepts every native <div> attribute in addition to the props below.

Prop	Type	Default	Description
variant	'default' \| 'info' \| 'success' \| 'warning' \| 'danger'	'info'
title	string	—	Optional semibold heading rendered above the message.
icon	ReactNode	—	Leading .banner-icon SVG.
dismissible	boolean	false
onDismissed	() => void	—	Fired once the dismiss animation completes. Remove the banner from your data model here.
ref	Ref<BannerHandle>	—	{ dismiss(): void } — animate out and remove programmatically.