The shape shared by the offline notice, the email-verification prompt and the update prompt: a thin, edge-to-edge bar that expands into view, states one thing with an optional icon, and collapses away when the condition clears. Driven by show, with a semantic colour, an optional message slot, top safe-area padding by default, and optional clickable / dismissible affordances that emit click and dismiss.
Ejemplos
Colours
Full-width strips in the semantic colours.
A new version is available
Everything is up to date
You're offline — changes will sync when you reconnect
Sync failed — retrying
<div class="flex flex-col gap-2">
<UiBanner show :safe-area="false" color="info" icon="mdi:information-outline" message="A new version is available" />
<UiBanner show :safe-area="false" color="success" icon="mdi:check-circle" message="Everything is up to date" />
<UiBanner show :safe-area="false" color="warning" icon="mdi:wifi-off" message="You're offline — changes will sync when you reconnect" />
<UiBanner show :safe-area="false" color="error" icon="mdi:alert-circle" message="Sync failed — retrying" />
</div>Clickable and dismissible
Emits click when pressed and dismiss from the close control.
Your email is not verified — tap here to verify
<div>
<UiButton class="mb-2" size="sm" @click="state.gone = false">Reset</UiButton>
<UiBanner
:show="!state.gone"
:safe-area="false"
color="info"
icon="mdi:email-alert-outline"
message="Your email is not verified — tap here to verify"
clickable
dismissible
@dismiss="state.gone = true"
/>
</div>Props
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| show | boolean | false | Whether the banner is shown; toggling it runs the slide-in / collapse-out. |
| color | string | 'info' | Colour of the bar. infosuccesswarningerrorneutral |
| icon | string | '' | Optional MDI icon shown before the message. |
| message | string | '' | Message text; ignored when the default slot is used. |
| clickable | boolean | false | Makes the whole bar a button that emits click. |
| dismissible | boolean | false | Adds a close control that emits dismiss. |
| dismissLabel | string | 'Dismiss' | Accessible label for the dismiss control. |
| safeArea | boolean | true | Pads for the top safe-area inset, for a banner pinned to the top of the screen. |
Eventos
| Evento | Datos | Descripción |
|---|---|---|
click | none | Emitted when a clickable banner is pressed. |
dismiss | none | Emitted when the close control of a dismissible banner is pressed. |
Slots
| Slot | Descripción |
|---|---|
default | Banner content, in place of the message prop. |