Components / Banner

Controlling State

Banners can be dismissed and conditionally rendered.

Main content goes here underneath the banner...

Semantic Variants

Different intents to convey distinct contexts.

Banner API

Prop / EventTypeDefaultDescription
modelValuebooleantrueControls banner visibility. Use v-model to bind.
intentstring'default'Semantic color intent: 'default', 'success', 'warning', 'danger', or 'info'.
iconComponentnullLucide icon component to display.
dismissiblebooleantrueWhether to render the close button.