Actions & feedback

Notice

An inline live-region message for informational, positive, cautionary, or error feedback.

NoticeNoticePropsNoticeVariant

Component workbench

Configure the production component, inspect it at responsive widths, copy synchronized JSX, and share the exact state from one workspace.

Review required

Check the implementation details before publishing this change.

Generated example

This JSX stays synchronized with the controls and uses only public package APIs.

tsx

import { Notice } from '@ai-created/ui';

export function Example() {
  return (
    <Notice title={"Review required"}>
      Check the supporting details before continuing.
    </Notice>
  );
}

Import

tsx

import { Notice } from '@ai-created/ui';

Install from a reviewed release

Replace the version placeholder with the release tag your product has reviewed.

shell

npm install --install-links "git+https://github.com/TheMarco/ai-created-ui.git#vX.Y.Z"

Load semantic tokens

css

@import '@ai-created/ui/styles/tokens.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

Extend Tailwind

module.exports = {
  presets: [require('@ai-created/ui/tailwind-preset')],
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/@ai-created/ui/src/**/*.{js,ts,jsx,tsx}',
  ],
};

Anatomy

Named regions define what belongs to the component, what remains optional, and where semantic responsibility lives.

Surface

Required

Semantic-tone container and live region.

div

Status icon

Optional

Decorative tone reinforcement.

Title

Optional

Optional concise message heading.

Body

Optional

Supporting explanation or recovery guidance.

Construction and authoring

The Figma-equivalent asset model, auto-layout, resizing, properties, slots, content bounds, localization, and governance contract.

Asset kind

component

Design library name

Components/Feedback/Notice

Maturity

stable

Last reviewed

2026-08-29

Canvas applicability

Publish tone variants with title, message, icon visibility, and alignment properties.

Auto layout

Direction: horizontal
Gap: 16px
Padding: 24px
Alignment: Start; optional centered composition
Wrap: Content wraps

Resizing

Width: fill
Height: hug
Minimum width: 240px
Maximum width: Parent controlled
Minimum height: Content controlled
Maximum height: Content controlled
Overflow: visible

Exposed design properties

Property	Type	Default	Code mapping	Options or notes
Tone	variant	default	variant	default, info, success, warning, error
Title	text	None	title	No additional constraint
Message	slot	None	children	No additional constraint
Centered	boolean	false	centered	No additional constraint
Hide icon	boolean	false	hideIcon	No additional constraint
Status icon	instance-swap	None	Derived from variant; custom replacement is design-only and needs implementation review	No additional constraint

Nested assets and slots

Surface

primitive / required

Semantic tone container.

<Surface> inside Notice

Status icon

slot

Decorative icon derived from tone.

Internal variant icon

Body

slot

Supporting content and recovery guidance.

children

Content limits

Title

One line, recommended maximum 48 characters

Overflow: Wrap only when localization requires it.

The outcome should be understandable at a glance.

Body

Two short paragraphs or 240 characters

Overflow: Move complex guidance into adjacent content.

Live-region announcements must remain concise.

Localization and RTL

Translatable: Title, Body

Icon appears on the logical start side.
Tone icon does not mirror.
Test long recovery instructions.
Verify announcement order in right-to-left mode.

Responsive behavior

Fill the containing content column.

No internal breakpoint

Allow copy to wrap.
At very narrow widths, use centered only when the surrounding design is also centered.

Authoring limits

Prototype presentation does not reproduce live-region announcements.
Custom role and aria-live values must remain aligned with severity.

Accountable owner

Design systems feedback owner

Canonical source: src/components/Notice.tsx

Tone behavior changes require accessibility review of role and announcement priority.
A breaking property, token, or behavior change requires design and engineering approval, a migration note, and a major release.
The design asset, implementation, documentation, accessibility contract, and regression coverage must ship in the same change.

Read the system construction standard

Visual specification

These measurements and semantic tokens define the supported visual contract. Local overrides should preserve the same hierarchy and interaction cues.

Padding

24px

Content gap

16px

Icon

16 × 16px

Radius

6px

Title/body gap

8px

Rules

Align icon and content to the top unless centered is intentionally used.
Use semantic surface, border, text, and icon color as a coordinated set.

Token dependencies

--color-*-surface

Tone background.

--color-*-border

Tone border.

--color-info / success / warning / error

Title and icon.

--color-text2

Body copy.

States and behavior

A component is not complete until its passive, interactive, disabled, and exceptional states remain understandable in both themes.

default

Trigger: Neutral message.
Visual response: Default Surface with no status icon.
Behavior: Polite status announcement.

info

Trigger: Informational message.
Visual response: Blue semantic treatment and info icon.
Behavior: Polite status announcement.

success

Trigger: Successful outcome.
Visual response: Green semantic treatment and check icon.
Behavior: Polite status announcement.

warning

Trigger: Caution or required review.
Visual response: Yellow semantic treatment and warning icon.
Behavior: Polite status announcement.

error

Trigger: Failed outcome.
Visual response: Red semantic treatment and error icon.
Behavior: Assertive alert announcement.
Accessibility: Defaults to role alert and aria-live assertive.

Accessibility contract

Semantics, accessible naming, keyboard behavior, focus and announcements are implementation requirements, not optional documentation.

Semantics: role=status by default; error uses role=alert. Both are overridable.
Accessible name: Title and body text form the announcement.

Keep icons decorative.
Avoid inserting a status region before its content is ready if it should be announced as a change.
Use error only for information that merits an assertive interruption.

Keyboard behavior

No component-specific keyboard behavior. Native document behavior remains unchanged.

Announcements

Default, info, success, and warning use polite live announcements.
Error uses an assertive announcement.

Implementation

Use the public package API and preserve the controlled-state, native-attribute, and ref contracts described below.

tsx

import { Notice } from '@ai-created/ui';

Server Component compatible

The role and aria-live defaults are derived from variant.
centered and hideIcon change presentation only.
Use ErrorReport when technical details need disclosure and copying.

tsx

<Notice variant="warning" title="Review required">Check the highlighted fields.</Notice>

Public API

These props and helpers are compatibility contracts. Changes require migration guidance and release notes.

Prop	Type	Default	Contract
variant	NoticeVariant	default	default, info, success, warning, or error.
title	string	undefined	Optional notice heading.
children	ReactNode	undefined	Message content.
role	string	status or alert	Override the semantic role.
aria-live	polite \| assertive \| off	polite or assertive	Override announcement behavior.

Usage guidance

These rules keep the component recognizable across products without preventing deliberate composition.

Do

Explain what happened and the next useful step.
Place the notice near the content it affects.

Do not

Do not use for ephemeral toast positioning.
Do not make every informational note assertive.

Testing contract

The component should be verified as rendered UI, an interaction model, an accessibility surface, and a theme-aware visual artifact.

Unit

Derives Surface variant, role, and aria-live correctly.
Honors explicit role and aria-live overrides.

Interaction

A newly rendered error is announced; centered and hidden-icon options preserve content.

Accessibility

Icons are hidden and live-region semantics match severity.

Visual

Capture every tone, title/body combination, centered treatment, and both themes.

Related specifications

error-report badge surface