Alert

Server component with client leaf AlertDismiss

ImportCopy Anchor Link

import { Alert, AlertDismiss } from '@nizivo/react/alert';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css and @nizivo/react/css/icon-button.css
import '@nizivo/react/css/alert.css';

Static or interactiveCopy Anchor Link

Split. An Alert ships one client module, the AlertDismiss leaf, only when you pass it in dismiss (+1,490 B gzip under Turbopack on the Next.js fixture's /alert-dismiss page). The shell does not import the leaf, so an Alert without dismiss ships nothing in every build mode. How to choose.

In a client app (a Vite or React Router single-page app, or a 'use client' file) it is an ordinary React component: event handlers, refs and state work as usual. In a client app.

The dismiss buttonCopy Anchor Link

Pass an AlertDismiss in dismiss. With no render it is an IconButton (tertiary, sm) showing the close glyph, named "Dismiss", so it looks, sizes, focuses and responds like every other icon button. Change the name with labels, or pass aria-label; children replace the glyph.

<Alert
  tone="critical"
  role="alert"
  title="Payment failed for order #1040"
  dismiss={<AlertDismiss onDismiss={dismissPaymentAlert} labels={{ dismiss: 'Fermer' }} />}
>
  Card was declined.
</Alert>

onDismiss is called with no arguments, so a Server Component can pass a Server Action. The Alert does not hide itself: the caller stops rendering it. An Alert without a dismiss ships no client JavaScript; AlertDismiss is its only client module.

Its glyph is 16 px and sits where Figma draws the close glyph: 16 px from the inline-end edge and centred on the title's line. The 32 px button reaches into the padding around it, so the row is no taller. It has no tooltip, like Dialog.Close: its name is read by assistive technology, and a tooltip would add the Tooltip code to every page that shows a dismissible alert. Its markup is IconButton's, so a page that imports per-component stylesheets needs css/icon-button.css too (the stylesheets list above names it; styles.css already has it).

With render, it is your element. A plain element keeps its own look; an IconButton keeps its variant and size and takes the slot's placement, which is made for sm. To add a tooltip, compose one: render={<IconButton icon={<X />} label="Dismiss" variant="tertiary" size="sm" />}. --nz-alert-dismiss-fg still sets the glyph colour (default --nz-icon-secondary).

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { Alert } from '@nizivo/react/alert';

/** Stand-ins for `@nizivo/icons` glyphs. */
function Mark(): JSX.Element {
  return (
    <svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor">
      <circle cx="12" cy="12" r="9" />
    </svg>
  );
}

export function AlertExample(): JSX.Element {
  return (
    <Alert icon={<Mark />} title="Payouts move to daily on Nov 1">
      No action needed.
    </Alert>
  );
}

import type { JSX } from 'react';
import { Button } from '@nizivo/react/button';
import { Alert, AlertDismiss } from '@nizivo/react/alert';

/** Stand-ins for `@nizivo/icons` glyphs. */
function Mark(): JSX.Element {
  return (
    <svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor">
      <circle cx="12" cy="12" r="9" />
    </svg>
  );
}

function Cross(): JSX.Element {
  return (
    <svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor">
      <path d="M7 7l10 10M17 7 7 17" />
    </svg>
  );
}

export function AlertDismissibleExample({ onDismiss }: { onDismiss?: () => void }): JSX.Element {
  return (
    <Alert
      tone="critical"
      role="alert"
      icon={<Mark />}
      title="Payment failed for order #1040"
      action={<Button size="sm">Retry payment</Button>}
      dismiss={
        <AlertDismiss {...(onDismiss && { onDismiss })}>
          <Cross />
        </AlertDismiss>
      }
    >
      Card was declined.
    </Alert>
  );
}

PropsCopy Anchor Link

Other exportsCopy Anchor Link

AlertDismissLabels type

import type { AlertDismissLabels } from '@nizivo/react/alert'

Strings this part renders (§16.4).

Name	Type	Default	Description
dismissrequired	string	'Dismiss'	The button's accessible name.

AlertDismissProps type

import type { AlertDismissProps } from '@nizivo/react/alert'

The props of AlertDismiss, listed above.

AlertProps type

import type { AlertProps } from '@nizivo/react/alert'

The props of Alert, listed above.

AlertState type

import type { AlertState } from '@nizivo/react/alert'

The render state of Alert, listed above.

AlertTone type

import type { AlertTone } from '@nizivo/react/alert'

Figma "Tone".

type AlertTone = "info" | "success" | "warning" | "critical"

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

Layers: nz.components. Classes: .nz-alert, .nz-alert-action, .nz-alert-content, .nz-alert-description, .nz-alert-dismiss, .nz-alert-icon, .nz-alert-title, .nz-icon-button.

AccessibilityCopy Anchor Link

These parts are interactive. Each gets the focus outline and touch-action rule from @nizivo/react/css/base.css (the nz.base layer), so the floor survives a restyle:

• alert-dismiss: draws the focus outline itself on keyboard focus.

KeyboardCopy Anchor Link

Source: The Alert shell (alert.tsx) renders the action before the dismiss slot; AlertDismiss is a native <button type="button"> (alert-dismiss.client.tsx), and the Next fixture checks that it takes a click.

FigmaCopy Anchor Link

Node ids from design/component-map.json, which nz gen writes from component.json. The links open the Nizivo Figma library, which may ask you to sign in.

• Canonical: Figma node 7275:15091
• Ghost masters: Figma node 756:868