Source: https://monarchui.dev/components/inline-notice/

Components · Status and feedback

# InlineNotice

A one-line tone message attached to a field, row, card or panel.

@rookcom/monarch-react

Component

## Tones

## Usage examples

### Plain, under a control

## 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

```tsx
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.

## Related components

- [Alert](https://monarchui.dev/components/alert/): Section message with a title and a paragraph.
- [CalloutBanner](https://monarchui.dev/components/callout-banner/): Page- or app-level banner, optionally a landmark.
- [Field](https://monarchui.dev/components/form-field/): Field errors and descriptions tied to an input.
- [Toast](https://monarchui.dev/components/toast/): Transient confirmation of an action.
- [Button](https://monarchui.dev/components/button/): The action and the close IconButton.

## Dependencies

| Kind | Depends on |
| --- | --- |
| npm packages | `react` |
| Monarch components | [Button](https://monarchui.dev/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`

## All example code

### Tones

```tsx
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>
```

### Plain, under a control

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

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