Iryx UIFeedback
IBanner
A message about the whole page or the whole account, spanning the full width. It is the page-level counterpart to IAlert, which talks about the thing beside it.
Your trial ends in 3 days. Upgrade to keep sending invoices.
A banner renders as a labelled region, named by label. For something that just happened, use useToast().
Variants
A neutral announcement.
Something to do with your plan.
Scheduled maintenance on Sunday.
Your account is verified.
Two invoices are past due.
Payment failed — update your card.
Position
static sits in the flow. top and bottom pin the banner to the viewport, where it covers part of every screen until it is dismissed.
<IBanner position="top" variant="danger" description="You are offline." />
<IBanner position="bottom" variant="neutral" description="We use cookies." />Contained and aligned
The fill always spans the full width. contained keeps the text within the page's reading measure instead of running to the window edges, and align centres it.
Contained and centred — the fill still spans, the text does not.
Dismissing
You can dismiss this one.
Persist the dismissal, or the banner returns on the next navigation.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'primary' | 'neutral' | Tone |
position | 'static' | 'top' | 'bottom' | 'static' | In the flow, or pinned to the viewport |
title | string | — | Bold first line |
description | string | — | Body text |
icon | icon | — | Leading icon |
contained | boolean | — | Keeps the text within the reading measure |
align | 'start' | 'center' | 'start' | Text alignment |
closable | boolean | false | Shows the dismiss button |
closeLabel | string | 'Dismiss' | Accessible name for that button |
label | string | 'Announcement' | Accessible name for the region |
as | string | 'div' | Element to render |
unstyled | boolean | — | Drop built-in classes |
class | string | — | Merged with the built-in classes |
ui | { root?, container?, icon?, content?, title?, actions?, close? } | — | Per-element class overrides |
v-model:open controls visibility.
Show one banner at a time. For a message about a single control or panel, use IAlert.