Alert

Inline message that communicates status, with an optional title and close button. The size prop (xs, sm, md, lg, xl) scales padding, icon and text.

Jump to API reference

Import

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

Tones

Vue
<UiAlert tone="info" title="Visa update">
  Umrah visas now take 3 working days.
</UiAlert>

<UiAlert tone="success" title="Booking confirmed">
  Your hotel in Makkah is reserved.
</UiAlert>

<UiAlert tone="warning" title="Limited rooms">
  Only 2 rooms left for these dates.
</UiAlert>

<UiAlert tone="danger" title="Payment failed">
  Please check your card and try again.
</UiAlert>

No title

Vue
<UiAlert tone="info">
  Check-in opens at 14:00 local time.
</UiAlert>

Sizes

Vue
<UiAlert size="xs" tone="info" title="Visa update">
  Umrah visas now take 3 working days.
</UiAlert>

<UiAlert size="sm" tone="info" title="Visa update">
  Umrah visas now take 3 working days.
</UiAlert>

<UiAlert size="md" tone="info" title="Visa update">
  Umrah visas now take 3 working days.
</UiAlert>

<UiAlert size="lg" tone="info" title="Visa update">
  Umrah visas now take 3 working days.
</UiAlert>

<UiAlert size="xl" tone="info" title="Visa update">
  Umrah visas now take 3 working days.
</UiAlert>

API reference

Inline message block with a tone icon, optional title and close button; use for form errors, notices and results inside a page.

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.
bannerbooleanfalseRemoves the border radius so the alert spans the full width like a Banner.
hideIconbooleanfalseHides the leading tone icon (the icon slot is hidden too).

Slots

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

defaultMessage text.
titleReplaces the title prop with custom content.
iconReplaces the tone icon inside the icon tile.
actionsRow under the message for buttons or links.

Events

Vue: @name. React: onName.

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

Notes

  • Has role="alert", so screen readers announce it when it appears.
  • Not self-dismissing: hide it yourself in the close handler.