Skip to content
v1.0
Components

Alert & callout

Two inline messages that sit beside the thing they are about — an alert for a live condition of the data, a callout for the author's own aside.

Alerts

Information: Zoning shown is the current planning scheme

A proposed amendment is on public notice until 14 September.

Caution: Data is older than we'd like

Council last published this overlay 14 months ago. Treat boundaries as indicative and confirm before you lodge.

Information: You can close this one

The × emits dismiss; this page holds the boolean that hides it.

Success: Report emailed

Sent to [email protected].
Code 
<GdAlert tone="info" title="Zoning shown is the current planning scheme">
  A proposed amendment is on public notice until 14 September.
</GdAlert>

<GdAlert tone="danger" title="We couldn't reach the council register" live>
  Constraints may be incomplete. Everything else on this page is from our
  own cadastre and is unaffected.
  <template #actions><GdButton size="sm" @click="retry">Try again</GdButton></template>
</GdAlert>

<!-- dismissible: the caller owns the hiding -->
<GdAlert v-if="!dismissed" dismissible @dismiss="dismissed = true">
  You can close this one.
</GdAlert>

Callouts

Code 
<GdCallout>
  Lot/plan is the only stable identifier.
</GdCallout>

<GdCallout tone="caution" title="Indicative only">
  Constraint extents are indicative to ±2 m.
</GdCallout>

<GdCallout quiet title="Quiet aside">
  The article variant — rule only, no wash, prose-sized text.
</GdCallout>

API

GdAlert

Props

PropTypeDefault
tone"success" | "info" | "caution" | "danger""info"

Generic status, never planning content — a red alert is an error, not a verdict. The tone picks the tile colour, the glyph and the role word a screen reader hears.

titlestring—

The lead line, in the tone's ink. Announced as "Error: …", "Caution: …" and so on.

liveboolean—

Announce it when it appears. Leave it off for an alert rendered on first paint. `danger` announces assertively (role="alert"); the other three are polite (role="status").

dismissibleboolean—

Offer a ×. The alert does NOT hide itself — it emits `dismiss` and the caller decides. An alert that hid itself while the condition it reports is still true would be lying on the caller's behalf.

dismissLabelstring"Dismiss"

The × button's accessible name. Fine as-is for one alert on a page; where several stack, name the thing being dismissed — four identical "Dismiss, button" announcements say nothing about which is which.

Slots

default

The message. Neutral ink in every tone.

actions

Buttons under the message — "Try again", "Use the cached copy".

Events

dismiss() => void

The × was activated. Nothing has been hidden yet — removing the alert is the caller's job.

GdCallout

Props

PropTypeDefault
tone"note" | "caution""note"

`note` is the accent voice. `caution` is the only status hue a callout may take.

titlestring—

The heading. Left off, it falls back to "Note" or "Caution" to match the tone — a callout is never headless.

quietboolean—

The article variant: rule only, no wash, prose-sized text.

Slots

default

The aside. A callout takes no actions slot at all.

Usage Guidelines

  • Use an alert for a condition of the DATA, right now. It lives inline, near the thing it is about.
  • Use a banner for a condition of the whole VIEW, which stays until it changes.
  • Use a toast for a confirmation of something the user asked for. Transient, and never a warning.
  • Use a callout when it is you speaking rather than the system — an editorial aside in docs or an article.
  • Set live on an alert that arrives after first paint, and leave it off on one rendered with the page.
  • Reach for quiet on a long reading surface, and for the tinted callout in a panel or a card.
  • Say what is unaffected in the last line of any failure alert. "Something went wrong" is not a message.

Behavior & Anatomy

Alert, banner or toast

Alert

A condition of the DATA, right now. Lives inline, near the thing it is about.

Banner

A condition of the whole VIEW, which stays until it changes.

Toast

A confirmation of something the user asked for. Transient.

The tone is announced in words as well as colour — a screen-reader user gets "Error" the same way a sighted one gets red. The body stays neutral ink in every tone: tinting the prose as well as the heading makes a caution message harder to read than a plain one, which is backwards.

Why a callout is not an alert

An alert reports a live condition; a callout is the author speaking — so a callout never carries actions, and it is never role="alert", because nothing has happened.

A callout's colour is generic status, never planning meaning. Caution is the only status hue it may take.

Navigate

Esc