Design system
Documentation experienceDS-07

Home / Components / System Banner

Approved

System Banner

Provide the governed NexWell System Banner contract for feedback & status interfaces.

Purpose

Provide the governed NexWell System Banner contract for feedback & status interfaces.

Source evidence informs purpose and anatomy; NexWell tokens, accessibility, and API are authoritative.

When to use

Use System Banner only for its documented feedback & status purpose.

When not to use

Do not restyle it into an unrelated interaction.

Anatomy

  1. container
  2. content

Specifications, variants, sizes, and states

Specifications

  • Exact dimensions, padding, gaps, icon sizes, radius, and typography: source-verification-required.
  • Implementation behavior is inspectable below; it is not evidence of founder approval.

Variants and sizes

default

source-verification-required: no governed component-specific size matrix is available

States

default

Measurements and typography

Every field is represented. A status is not a value: unresolved evidence cannot be converted into an implementation number.

Height / widthpartialNo approved exact value may be inferred.
PaddingpartialNo approved exact value may be inferred.
GappartialNo approved exact value may be inferred.
Radius / borderpartialNo approved exact value may be inferred.
Icon sizepartialNo approved exact value may be inferred.
Font / size / weight / line height / trackingpartialNo approved exact value may be inferred.

State matrix

Actual implementation states are listed below. Requested universal states not supported by the component API remain explicitly unclaimed.

DefaultImplemented / inspect preview
Hovernot-applicable-or-source-verification-required
Focusnot-applicable-or-source-verification-required
Active / pressednot-applicable-or-source-verification-required
Disablednot-applicable-or-source-verification-required
Loadingnot-applicable-or-source-verification-required
Errornot-applicable-or-source-verification-required
Successnot-applicable-or-source-verification-required
Readonlynot-applicable-or-source-verification-required
Emptynot-applicable-or-source-verification-required

React and TypeScript API

Public properties

approved-current Generated from the package registry; controls expose only the supported subset listed here.

children
import { SystemBanner } from "@nexwellaifactory/components";
// children

export function Example() {
  return <SystemBanner />;
}

Open stable isolated canvas

Usage and content

Do

Use the component for its documented purpose.

Don’t

Do not restyle it into an unrelated interaction.

Content rules

  • Use concise, task-specific labels.
  • Do not communicate state through color alone.
  • Allow localized text to wrap without hiding critical actions.

Accessibility, keyboard, responsive, and RTL

Accessibility

  • Native semantics first
  • Accessible name required
  • State exposed programmatically

Keyboard

  • Native element behavior
  • Visible focus indicator
  • No positive tabindex

Responsive and RTL

Wraps or scrolls without hiding critical content; supports 200% text expansion.

Uses logical layout; mirrors only spatial meaning.

Actual package output

Interactive example

Scheduled maintenance finishes at 04:00 UTC.

Preview width changes the bounded canvas; use the RTL control below to inspect logical layout.

Token mapping and source evidence

Traceable implementation

Uber-derived structural evidence, adapted through approved NexWell decisions.

semantic colorfoundation spacingfoundation shapefoundation motion

docs/source-audit/component-evidence-matrix.csv :: system-banner

Missing fields in the source remain documented source absence, not requirements invented by the implementation.

Evidence completeness

10 associated local source records. Statuses below come directly from the DS-13 Checkpoint 1 component evidence matrix.

overviewpartial
anatomypartial
variantspartial
sizespartial
dimensionspartial
paddingpartial
gapspartial
icon_sizespartial
typographypartial
width_behaviorsource-verification-required
content_behaviorsource-verification-required
truncation_wrappingpartial
statespartial
accessibilitypartial
keyboardpartial
responsivepartial
rtlsource-verification-required
motionpartial
react_apipartial
token_mappingsource-verification-required
implementation_mappingsource-verification-required
visual_redlinessource-verification-required
testspartial

Cross-platform implementation

React / TypeScript: current package API is shown above.

Flutter: source-verification-required — no canonical Flutter API or implementation mapping exists, and this web portal does not infer one.

AI agents: consume approved records only; preserve proposed and unresolved statuses and import the public component instead of recreating it.