Alert

A message about the state of a form or a request.

import { Alert } from '@zitdevs/ui';

Examples

Check 2 fields before sending

• Enter your full name
• Enter a valid email

Your session ends in 5 minutes

Save the form to keep what you entered.

Request received

A specialist will reply within one business day.

Edit the request

Before you start

The form takes about four minutes.

You chose IT audit on the service page. You can change it below.

<Alert
  tone="error"
  title="Check 2 fields before sending"
  items={[
    { label: 'Enter your full name', href: '#full-name' },
    { label: 'Enter a valid email', href: '#email' },
  ]}
/>
<Alert
  tone="success"
  title="Request received"
  body="A specialist will reply within one business day."
  action={<Button label="Edit the request" variant="link" size="sm" />}
/>
<Alert tone="note" body="You chose IT audit on the service page. You can change it below." />

Props

Prop	Type	Default	Notes
tone	'error' | 'warning' | 'success' | 'info' | 'note'	'error'	Sets the role, icon and colours; see below.
title	string	—	Bold first line with the tone’s icon. Ignored by note.
body	string	—	The only content note renders.
items	readonly { label: string; href: string }[]	[]	The error summary: each problem links to its field. Ignored by note.
action	ReactNode	—	What the reader can do about it, beside body. Ignored by note.
ref	Ref<HTMLElement>	—	The root: a <div>, or a <p> for note.
className	string	—	Placement.
anything else	HTML attributes	—	Except role, which the tone decides.

tone	Role	Meaning
error	alert	Interrupts: a failed submit, a server error.
warning, success, info	status	Waits its turn.
note	note	Only explains, such as a preselected service.

Exported types: AlertProps, AlertTone, AlertItem.

Accessibility

• The role follows the tone: an error interrupts, a status waits, a note only explains.
• The error summary is a way back, not only a report: each item links to its field. Point each href at the field’s id.
• The tone lives in the border, the field and the icon. Titles take the tone’s colour only where it reaches 4.5:1: errors are danger-strong, warnings and successes ink.
• The icon is hidden; the title says what it means.

Without JavaScript

Server-rendered markup. To announce an alert that appears after the page loads, render the alert’s container first and its content later, as live regions require; on a page that a form’s POST returns, the alert is simply part of the page.

Theming

danger, danger-soft, danger-strong, warning, warning-soft, success, success-soft, info, info-soft, ink, body, and for note primary-line, primary-soft and primary.

Use instead: an error about one field → that field’s own message.