Alert

Import

import { Alert } from '@envsemble/envui';

Usage

An Alert takes its tone, a short title, the message as children, and actions below the message, such as a Button or a Link; a secondary Button there takes a fill that stands clear of the tint in both themes, and an outline, ghost or text Button is drawn in the alert's own colors: its label in the text color, an outline's edge in the tone's color, and the tone's layers on hover and press. Put it above the content it concerns, and remove it once it no longer applies.

BlockedRelease.tsx

import { Alert, Button } from '@envsemble/envui';

export default function BlockedRelease() {
  return (
    <Alert
      tone="warning"
      title="Two decisions are blocked"
      actions={<Button variant="secondary">Review blockers</Button>}
      style={{ inlineSize: 'min(100%, 32rem)' }}
    >
      The release can’t start until both are resolved.
    </Alert>
  );
}

Tones

tone is info, the default, success, warning or danger, for an error or a failure; a toast has neutral instead of warning, since a warning stays on the page, here. It sets the fill, the tone's tint, and the color of the icon; the title and the message keep the text color. An alert has no edge, except at high contrast, where an edge in the border color bounds it.

<Alert title="Sync paused">Changes are saved on this device until you reconnect.</Alert>
<Alert tone="danger" title="Couldn’t publish">Try again, or check the build log.</Alert>

Announce a failure

Info and success alerts take the status role and are read politely. announce gives a warning or danger alert the alert role, so it is read at once; set it only on an alert that appears because of something people just did, never on one there when the page loads. The SaveFailed example shows one after a failed save, and moves focus back to the save button when it is dismissed.

<Alert tone="danger" title="Couldn’t save the draft" announce onDismiss={dismiss}>
  Your changes are still in the editor; try again in a moment.
</Alert>

Icon

icon replaces the tone's icon, and null or false leaves it out.

<Alert icon={<IconConstruction />} title="Maintenance on Saturday">…</Alert>
<Alert tone="success" icon={false}>Priya Shah accepted the invitation.</Alert>

Dismiss

onDismiss shows a dismiss button that calls it; the application removes the alert, and moves focus, such as to the control the alert concerned. Offer it only where the message can safely be hidden. dismissLabel names the button, and is also its tooltip.

Composition

The parts are the container, env-alert, the icon, env-alert-icon, the title, env-alert-title, the message, env-alert-message, the action, env-alert-action, and the dismiss button, env-alert-dismiss, an IconButton with a cross.

Customize

An Alert draws an edge only at high contrast, unless its outline color sets one, and its title and message take its text color while its icon and dismiss button take the icon's.

Accessibility

You provide

A message that makes sense without its color and icon.
announce only on an alert that appears because of something that just happened, never on one there when the page loads.
Focus for after a dismissal, such as on the control the alert concerned.

envUI provides

The status role on info and success alerts, and alert on warning and danger alerts with announce.
An icon for each tone, hidden, beside text that carries the meaning.
A dismiss button named by dismissLabel, in the provider's language.

Props

An inline banner for a page- or section-level message, in its tone. It stays a server component: its dismiss button is an IconButton with a cross, a client leaf named in the provider's language.

Prop	Type	Description
`tone`Default `'info'`	`'info''success''warning''danger'`	What the message means: info, success, warning or danger, for an error or a failure. Sets the tint, the title's and icon's color and the icon; info and success alerts are also status messages.
`title`	`ReactNode`	A short heading for the message, such as "Sync paused", above the message.
`children`	`ReactNode`	The message: what it means and what people can do.
`icon`	`ReactNode`	Replaces the tone's icon; null or false shows none.
`actions`	`ReactNode`	Actions below the message, such as a Button or a Link, in a row that wraps.
`onDismiss`	`() => void`	Shows a dismiss button that calls it; the application removes the alert.
`dismissLabel`Default `'Dismiss', or EnvUIProvider's messages.alert.dismiss`	`string`	Accessible name of the dismiss button, also shown as its tooltip.
`announce`Default `false`	`boolean`	The alert appeared because of something that just happened and should interrupt: warning and danger alerts take the alert role. Info and success alerts are always polite status messages.
`skeleton`Default `false`	`boolean`	Shows it and its content as a busy skeleton while that loads; turning it on or off renders the content anew.

Also accepts the native props of <div>, such as ref, className and aria-* attributes.

Part names

Each part's class and state attributes are public and versioned, for an application's CSS to style.

env-alert: The alert: an icon and a message in its tone.
env-alert-action: The alert's action, such as a button.
env-alert-content: The column that holds the title and the message.
env-alert-dismiss: The button that dismisses the alert.
env-alert-icon: The icon of the alert's tone.
env-alert-message: The alert's message.
env-alert-title: The alert's title.
data-env-skeleton: Any value, or present on env-alert-message, env-alert-title
data-tone: danger · info · success · warning

Color properties

Each sets a color of one instance, through style or CSS; its hover, focus and press follow it. They are public and versioned.

--env-alert-container: The tint behind the alert.
--env-alert-content: The title and message.
--env-alert-outline: The edge.
--env-alert-icon: The tone's icon and the dismiss button, whose state layers it colors.

Strings

EnvUIProvider's messages overrides each, and a component's own label prop wins over it.

messages.alert.dismiss: "Dismiss" The dismiss button's name.

Changelog

1.0.0: No edge outside high contrast: the tone's stronger tint fills it, the title takes the tone's color as the icon does, and its corners are a card's, 1.25 rem. At high contrast it keeps the softer tint with an edge in the border color.

actions for action, as on Card and Dialog. tone="danger" for error; the dismiss button is an IconButton with a cross, named Dismiss in the provider's language.

Notice is Alert, with AlertTone and the env-alert-* classes; the page is alert.
1.0.0-prerelease.6: The dismiss button's focus ring lies inside its circle, the size of its hover fill, rather than around it.

In light, success and danger rest on lighter, clearer tints, as strong as information and warning.

In light the tone's tint lies over the white raised surface, so it reads as its tone's color on the gray page; the title takes the text color, and the icon and the tint carry the tone.

An alert rests on its tone's tint, --env-color-bg-{tone}-muted, in every theme and contrast, rather than the tone's hover layer, and takes the large corner of the radius scale, --env-radius-lg, which the compact scale tightens, rather than a fixed 1.25 rem, so a one-line alert no longer reads as a pill.

Outline, ghost and text buttons among the actions take the alert's text color, an outline's edge the tone's color, and the tone's hover and press layers, rather than the link blue on every tone.
1.0.0-prerelease.5: A card's inset, 14 px above and below and 16 px at the sides; the title is semibold in the body size, 2 px above the message, which takes the small body size.