Reactberry

SystemNotice

Display a centred inline status message with colour schemas, an optional icon, and a loading state.

SystemNotice is a client component that renders a compact, centred message strip, such as "Saving…" or "Connection restored". It can optionally show an animated loading indicator and dividers above and below.

Draft autosaved 2 minutes ago
All changes saved
A new version is available
Your trial ends in 3 days
Connection lost

Import#

typescript
import { SystemNotice } from "@reactberry/system/blocks";

Usage#

typescript
import { SystemNotice } from "@reactberry/system/blocks";
import { Box } from "@reactberry/system/elements";

export default function SyncStatus({ syncing }: { syncing: boolean }) {
  return (
    <Box width="100%">
      <SystemNotice
        message={syncing ? "Syncing changes" : "All changes saved"}
        loading={syncing}
        colorSchema={syncing ? "default" : "success"}
      />
    </Box>
  );
}

Examples#

Loading state#

loading shows an animated dots icon before the message and hides icon.

Syncing changes

Icon and dividers#

Pass any React node as icon; showBreaks adds a Divider above and below the notice.

You are viewing an archived project.

API#

SystemNotice#

PropTypeDefaultDescription
message*
ReactNode
—

Notice content

loading
boolean
false

Shows an animated dots icon before the message. When true, icon is not rendered

showBreaks
boolean
false

Renders a Divider above and below the notice

colorSchema
string
default

Sets skin and color: "default", "warning", "success", "error" or "info". Unknown values fall back to "default"

icon
ReactNode
—

Element shown before the message when not loading

Any other props (BoxProps) are spread onto the outer Text element (rendered as a div) after the schema styles, so skin, color, and the defaults p="s", my="xs", shape="rounded", fontSize="s" and fontWeight="medium" can be overridden.

Accessibility#

  • The notice has no ARIA live region role. Add role="status" or aria-live through spread props if updates should be announced.

Notes#

  • Schema mapping: default uses skin="panel" with secondary text; success, error, and info use the matching .subtle skin with primary text; warning uses warning.subtle with palette.yellows.10 text.