Section message

import { SectionMessage } from "@bosunkit/components/section-message";
import type { ReactElement } from "react";

export const description: string =
  "A message to one panel: the forward sonar's verdict, read where the crew decide what to do about it.";

export default function Sonar(): ReactElement {
  return (
    <SectionMessage title="Mounting not set" kind="attention">
      Set the mounting before the sonar reads.
    </SectionMessage>
  );
}

SectionMessage is the message of one panel or section, drawn where the crew read it beside what it is about: the forward sonar's "mounting not set" verdict, a checklist's last state. The kinds are error, attention, info, success and discovery, and the mark is their only color — the notification colors, never the alert colors, which mean an alert and nothing else.

import { SectionMessage } from "@bosunkit/components/section-message";
import type { ReactElement } from "react";

export const description: string =
  "A message to one panel: the forward sonar's verdict, read where the crew decide what to do about it.";

export default function Sonar(): ReactElement {
  return (
    <SectionMessage title="Mounting not set" kind="attention">
      Set the mounting before the sonar reads.
    </SectionMessage>
  );
}

Explain the affected region

Place the message inside or immediately before the panel it describes. The title states the condition and the body explains its consequence or next step. A report limitation should name the affected evidence and how it limits the conclusion; a form failure should say whether the draft is retained.

SectionMessage supplies visual structure but no automatic live-region announcement. The consumer decides when an asynchronous result needs an announcement and where focus goes. Use InlineMessage for one field and Banner for a whole view. Keep a recovery button visible and labeled by what it does; color alone cannot explain the message kind or whether the operation succeeded.

Props