Message

The Message displays an inline status message with an icon.

It renders nothing when both message and children are absent, (cuts down on conditional rendering in parent components).
The variant prop controls the visual style and ARIA role for accessibility.
When onDismiss is provided, a dismiss button appears that calls the provided function when clicked.

Import

import { Message } from "h2o-library";

Usage

All Variants

Your session will expire in 10 minutes.

Record saved successfully.

Some fields are incomplete.

Failed to submit the form. Please try again.

No changes have been made.

<Message variant="info" message="Your session will expire in 10 minutes." />
<Message variant="success" message="Record saved successfully." />
<Message variant="warning" message="Some fields are incomplete." />
<Message variant="error" message="Failed to submit. Please try again." />
<Message variant="muted" message="No changes have been made." />

With Children (rich content)

Use children when the message content needs links or formatted text.

Error: Something went wrong. Please try again.

<Message variant="warning">
  Some fields are missing.{" "}
  <a href="/help" style={{ textDecoration: "underline" }}>
    Learn more
  </a>
</Message>;

Dismissible

Pass an onDismiss handler to show a dismiss button. The component itself doesn't manage dismissed state, so you can control it as needed in the parent.

This is a dismissible warning message.

const [dismissed, setDismissed] = useState(false);

{
  !dismissed && (
    <Message
      variant="info"
      message="You have 3 pending reviews."
      onDismiss={() => setDismissed(true)}
    />
  );
}

Conditional Rendering

When both message and children are absent, the component returns null.

// Renders nothing when there's no error
<Message variant="error" message={formError} />;

Playground

Loading playground…

Keyboard

When onDismiss is set, the dismiss control is a native button: Tab to focus and Enter or Space to activate.

Props

Prop	Type	Default	Description
`variant`*	`"info" \| "muted" \| "error" \| "warning" \| "success"`	—	Semantic style and icon selection.
`message`	`string`	`undefined`	Plain text content. Ignored when children is provided.
`children`	`React.ReactNode`	`undefined`	Rich content (links, formatted text). Takes priority over message.
`onDismiss`	`() => void`	`undefined`	When provided, renders a dismiss button that calls this on click.
`iconSize`	`number`	`16`	Size of the status icon in pixels.
`iconStrokeWidth`	`number`	`1.5`	Stroke width of the status icon.
`iconClassName`	`string`	`""`	Additional class applied to the icon.
`className`	`string`	`""`	Additional CSS classes for the message container.

Design Guidelines

Use below form fields or action areas — not as a top-level page alert (use a Toast for that).
error and warning draw attention immediately; muted is for neutral/empty states.
Pair with form state: pass undefined when there's no message, the string when validation fails.
Use onDismiss for non-critical notifications the user can acknowledge.

Accessibility

error and warning use role="alert" — screen readers announce them immediately when rendered.
info and success use role="status" — announced politely without interrupting the user.
muted has no live region role — appropriate for static or empty-state messages.