Feedback / React + CSS
Inline notice
A calm confirmation that stays in context until someone dismisses it.
Your team can see the latest version.
"use client";
import styles from "./InlineNotice.module.css";
export default function InlineNotice({
title = "Changes saved",
children = "Your team can see the latest version.",
onDismiss,
}) {
return (
<div className={styles.notice}>
<div role="status">
<strong>{title}</strong>
<p>{children}</p>
</div>
{onDismiss && (
<button
type="button"
onClick={onDismiss}
aria-label="Dismiss notification"
>
×
</button>
)}
</div>
);
}
Make it yours
Render after a successful action. Keep important feedback available until the user dismisses it; do not hide it on a short timer.
- Use a React project with CSS Modules support, such as Next.js or Vite.
- Save the JSX as
InlineNotice.jsxand the CSS asInlineNotice.module.cssin the same folder. - Import
InlineNoticeand connect its props to your application. Controlled components need parent state and change handlers.
No third-party component or animation package is required. Use the theme controls to adjust accent, corners, spacing, and type. Copy the Theme CSS into your stylesheet and wrap your components in <div className="tdp-components">. The theme applies to every component inside that wrapper. TDP defaults work without a theme file.
Props
| Prop | Type | Use |
|---|---|---|
title | string | Short confirmation heading. |
children | ReactNode | Supporting information. |
onDismiss | function | When supplied, shows a dismiss button. |
Accessibility & behavior
The message uses a polite status region. The optional dismiss control has an explicit accessible name and a 44px target. For urgent errors, use a separate alert pattern.
Visible focus styles and reduced-motion support are included. Check labels, contrast, keyboard behavior, and screen-reader output again after adapting the component to your product.