InlineNotice

Tones

Members sync from Rook ID every 15 minutes.

Connected to the shared inbox.

Unverified. Emails from this domain may land in spam.

Could not load comments.

Draft restored from this device.

import { Button, InlineNotice } from '@rookcom/monarch-react';

<InlineNotice tone="info">Members sync from Rook ID every 15 minutes.</InlineNotice>
<InlineNotice tone="success">Connected to the shared inbox.</InlineNotice>
<InlineNotice tone="warning" title="Unverified.">
  Emails from this domain may land in spam.
</InlineNotice>
<InlineNotice
  tone="danger"
  live
  action={
    <Button size="xs" onClick={() => {}}>
      Retry
    </Button>
  }
>
  Could not load comments.
</InlineNotice>
<InlineNotice tone="neutral" dismissible>
  Draft restored from this device.
</InlineNotice>

Usage examples

Plain, under a control

import { InlineNotice } from '@rookcom/monarch-react';

<InlineNotice variant="plain" tone="success">
  Domain verified
</InlineNotice>
<InlineNotice variant="plain" tone="warning">
  Renews in 6 days
</InlineNotice>

Purpose

A short message that belongs to one thing on the page: under a form, inside a card, in a table row or a side panel. Icon, an optional bold lead-in, one sentence and at most one action.

Use when

A note about one control or record: "Unverified. Emails from this domain may land in spam."
A small inline error with a retry, where an empty or error state would be too big.
An edit conflict with one resolving action next to the editor.

Avoid when

The message needs a title and a paragraph, or describes a whole section: use Alert.
The message is about the account, the app or the whole view (trial, maintenance, scope): use CalloutBanner.
Confirming an action that just happened: use Toast.
A validation message for one field: use the Field error (FieldError), which is wired to the input.

Design principles

One line, one idea. If it needs a second paragraph it is an Alert.
It sits next to what it is about and is the same width as that thing, not the page.
Silent by default; live when it appears because of something that just happened. live (true) picks the politeness from the tone.
Never colour alone: every tone has its own icon, and plain text uses the tone’s strong colour, which meets 4.5:1 on every surface.

API reference

import { InlineNotice } from '@rookcom/monarch-react';

Export	Kind	Rendering	Root class
`InlineNotice`	component	client	`.mn-inline-notice`

Forwards its ref to the root <div>; native attributes pass through.

The message renders in a <p>, so children must be phrasing content (text, links, <strong>).

Renders nothing while closed.

Generated from the TypeScript declarations of packages/react/src/components/feedback/inline-notice.

Properties

`InlineNotice`

A one-line message attached to the thing it is about: a form, a card, a row or a panel. Smaller than Alert, with no body block: icon, optional bold lead-in, one sentence and at most one action.

Prop	Type	Description
`action`	`ReactNode`	One small action on the trailing edge, e.g. a `size="xs"` Button.
`children`	`ReactNode`
`className`	`string`
`defaultOpen`	`boolean`	Initial visibility when uncontrolled. Default true.
`dismissible`	`boolean`	Shows a close button. Implied by `onDismiss`.
`dismissLabel`	`string`	Accessible name of the close button. Default "Dismiss".
`icon`	`ReactNode`	Replaces the tone icon. Pass `null` for none.
`id`	`string`
`live`	`boolean \| "polite" \| "assertive"`	Announce the notice when it appears. `true` picks by tone: `danger` is assertive (role="alert"), every other tone polite (role="status"). Leave unset for a notice that is there when the view loads.
`onDismiss`	`(() => void)`	Called when the user dismisses the notice; persistence stays with the product.
`open`	`boolean`	Controlled visibility. Leave unset to let the notice hide itself on dismiss.
`title`	`ReactNode`	A short bold lead-in on the same line ("Conflict.").
`tone`	`InlineNoticeTone`	Colour and default icon. Default `info`.
`variant`	`"subtle" \| "plain"`	`subtle`: a tinted strip. `plain`: icon and coloured text only, for tight spots such as under a field or inside a table row. Default `subtle`.

Variants

Prop	Values	Description
`tone`	`'neutral''info''success''warning''danger'`	Colour and default icon. Default `info`. Exposed as `data-tone`.
`variant`	`'subtle''plain'`	`subtle`: a tinted strip. `plain`: icon and coloured text with no fill or padding, for tight spots. Default `subtle`. Exposed as `data-variant`.
`live`	`'true''polite''assertive'`	`true` = by tone (danger → alert, others → status); `polite` → status; `assertive` → alert. Unset: no live role.

States

State	Exposed as	Behaviour
Open	–	Rendered. The default.
Dismissed	–	Uncontrolled: hidden after the close button is pressed. Controlled: hidden when `open` becomes false.
Live	`role="status" \| role="alert" (on the message)`	Announced when it appears; only when `live` is set.

Interaction behaviour

action renders one control on the trailing edge, for example a size="xs" Button.
The close button appears with dismissible or onDismiss; pressing it calls onDismiss and, when uncontrolled, hides the notice.
After dismissal, focus moves to the next focusable element (or the previous one), never to the page body.

Keyboard support

Keys	Action
`Tab`	Moves to the action, then the close button.
`Enter / Space`	Activates the action or dismisses the notice.

The notice itself is not focusable and never takes focus when it appears.

Accessibility

Role: none, status or alert (on the message, with live)
Accessible name: Not named; the message is its content.

The icon is aria-hidden; the lead-in (title) and the sentence carry the meaning and are read together.
The live role is on the message only, so the action and close button labels are not announced with it.
The close button is an IconButton labelled dismissLabel (default "Dismiss").

Responsive behaviour

The message wraps; the action and close button stay on the trailing edge, vertically centred.
It never exceeds its container (max-width: 100%), down to 320px.

Theme support

Subtle uses the tone’s subtle background with default text and a strong icon; plain uses the tone’s strong colour for text.
Light, dark and high-contrast themes apply through tokens. No animation.

Do and don't

Do

Place it directly next to what it is about.
Keep it to one sentence; use the title lead-in for the key word ("Conflict.").
Give an error a way out with action (Retry, Use theirs).

Don't

Do not use it for page-level messages; that is CalloutBanner.
Do not repeat a field error in an InlineNotice; the Field already announces it.
Do not make static notices live.

Alert: Section message with a title and a paragraph.
CalloutBanner: Page- or app-level banner, optionally a landmark.
Field: Field errors and descriptions tied to an input.
Toast: Transient confirmation of an action.
Button: The action and the close IconButton.

Dependencies

Kind	Depends on
npm packages	`react`
Monarch components	Button

Intent subtle and strong tokens.

Testing coverage

Renders the message with tone, variant and a decorative icon; axe clean.
Forwards its ref and native attributes.
live picks status or alert by tone, or as given.
Runs the trailing action from the keyboard; axe clean.
Dismisses with the keyboard and moves focus to the next control.
Controlled open wins over dismissal.
Plain variant, custom icon and no icon; dismissible without a callback with a custom label.
Renders on the server.

Check	Covered
Axe in jsdom	Yes
Server rendering	Yes
Browser suites	Visual baselines: /__gallery; Cross-browser axe: /components/inline-notice

Tests: packages/react/src/components/feedback/inline-notice

Tones

Usage examples

Plain, under a control

Purpose

Use when

Avoid when

Design principles

API reference

Properties

Variants

States

Interaction behaviour

Keyboard support

Accessibility

Responsive behaviour

Theme support

Do and don't

Do

Don't

Related components

Dependencies

Testing coverage

`InlineNotice`