Alert

Tells someone about something that needs their attention, in one of five tones.

Live React portWildAlert.vueFeedback/AlertWAlert

Try it

Switch the variant, then press the cross or tab to it.

Battery below 20%Logger 4412 will stop reporting in about six days.

Variant

Size

Title

Dismissible

<WildAlert
  variant="warning"
  size="md"
  title="Battery below 20%"
  dismissible
  @dismiss="hide"
>
  Logger 4412 will stop reporting in about six days.
</WildAlert>

When to use

Use an alert for a condition that affects the page or panel it sits in.
Use one per region, at the top of what it describes.
Let people dismiss it only once the message has done its job.

Don’t use it

To confirm an action that just finished. Use a toast.
For one field’s problem. Use an error message.
When there’s nothing to show yet. Use an empty state.

Variants

Five tones. Pick by meaning: warning and error ask for action; info, success and neutral only inform.

New schedule for logger 4412Readings now arrive every fifteen minutes.

Logger 4412 is reportingIts readings will appear here within fifteen minutes.

Battery below 20%Logger 4412 will stop reporting in about six days.

Sync failedThree sites didn’t report in the last window. Try again in a few minutes.

Maintenance on SundayReadings may arrive late between 2am and 4am.

<WildAlert variant="warning" title="Battery below 20%">
  Logger 4412 will stop reporting in about six days.
</WildAlert>

Readings arrive every fifteen minutes.

<WildAlert variant="info">Readings arrive every fifteen minutes.</WildAlert>

Drop the title in dense screens, where one line of consequence is enough.

Sizes

Three, with 13, 14 and 15px text. The icon and the cross scale with the padding.

Size smReadings arrive every fifteen minutes.

Size mdReadings arrive every fifteen minutes.

Size lgReadings arrive every fifteen minutes.

Use sm inside forms and panels, md for page banners and lg for a page with little else on it.

Content

Put the fact in the title: “Battery below 20%”.
Put the consequence or the next step in the body: “Logger 4412 will stop reporting in about six days.”
Keep the title to six words or fewer, in sentence case, with no full stop.
Name the logger or site, so nobody has to guess which one.

Accessibility

Error and warning are announced as they appear; the other tones wait their turn. The cross is named “Dismiss” plus the title, so a stack of alerts stays distinguishable.

Key	What it does
Tab	Moves focus to the cross, when the alert is dismissible.
Enter / Space	Dismisses the alert and moves focus to the next control.

Props

Prop	Type	Default	Description
variant	'info' \| 'success' \| 'warning' \| 'error' \| 'neutral'	'info'	The tone. See Variants.
size	'sm' \| 'md' \| 'lg'	'md'	Padding and text size: 13, 14 or 15px.
title	string	—	Bold first line. Leave out for a single line.
icon	string \| boolean	true	Replaces the status icon by name; false hides it.
dismissible	boolean	false	Shows the cross.
@dismiss	() => void	—	Fires when the cross is pressed. Hide the alert here.

Tokens

Token	Value	Where it lands
--radius-lg	8px	Corners.
--global-blue-200	#D6F4FF	Info ground.
--global-green-200	#E1FAEA	Success ground.
--global-squash-200	#FFF1DA	Warning ground.
--global-red-200	#FFE3E3	Error ground.
--global-neutral-grey-200	#F5F5F5	Neutral ground.
--global-*-300	grey-500 for neutral	Border.
--global-*-400 / 500	grey-600 / 700 for neutral	The cross’s hover and pressed circle.
--global-*-1000 / 1100	blue, squash: 1100; others: 1000	Body text and the cross.
--global-*-1100 / 1200	blue, squash: 1200; others: 1100	Title, and the cross on hover.
--global-*-800 / 900 / 1000	green, red: 800; grey: 900; blue, squash: 1000	Status icon.
--global-blue-1000	#1877F2	Focus ring on the cross.