Banner

Full-width Alert styled as a page-level announcement. The size prop (xs, sm, md, lg, xl) scales padding, icon and text.

Jump to API reference

Import

Vue
import { UiBanner } from '@ziyarago/ui/vue'

Info

Vue
<UiBanner tone="info" title="Ramadan packages">
  Early-bird prices end on Friday.
</UiBanner>

Warning

Vue
<UiBanner tone="warning" title="Scheduled maintenance">
  Booking will be unavailable tonight from 01:00 to 02:00.
</UiBanner>

Sizes

Vue
<UiBanner size="xs" tone="info" title="Ramadan packages">
  Early-bird prices end on Friday.
</UiBanner>

<UiBanner size="sm" tone="info" title="Ramadan packages">
  Early-bird prices end on Friday.
</UiBanner>

<UiBanner size="md" tone="info" title="Ramadan packages">
  Early-bird prices end on Friday.
</UiBanner>

<UiBanner size="lg" tone="info" title="Ramadan packages">
  Early-bird prices end on Friday.
</UiBanner>

<UiBanner size="xl" tone="info" title="Ramadan packages">
  Early-bird prices end on Friday.
</UiBanner>

API reference

Full-width Alert without rounded corners; use at the top of a page or section for system-wide notices.

Props

PropType and valuesDefaultDescription
toneinfosuccesswarningdanger'info'Color and icon: info, check, triangle-alert or circle-alert.
titlestring—Bold first line above the message.
sizexssmmdlgxl'md'Scale of padding, icon and text.

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultMessage text.

Events

Vue: @name. React: onName.

closeCalled when the close button is clicked. The button is rendered only when this handler is set.

Notes

  • Same as Alert with banner enabled; all Alert props are forwarded.