# code-snippets/4.0.0-beta.2/js/components/common/demo/DemoCallout.tsx

Code Snippets, version 4.0.0-beta.2. 27 lines.

- Page: https://pluginprobe.com/plugins/code-snippets/4.0.0-beta.2/code/js/components/common/demo/DemoCallout.tsx
- Raw: https://pluginprobe.com/plugins/code-snippets/4.0.0-beta.2/raw/js/components/common/demo/DemoCallout.tsx
- Modified: 2026-09-22T07:42:04+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/code-snippets/4.0.0-beta.2/code/js/components/common/demo/DemoCallout.tsx#L10-L20`.

```tsx
import React from 'react'

export interface CalloutContent {
	step: string
	title: string
	body: string
}

/**
 * Commentary on what a walkthrough is doing at the current stage, floating in
 * the corner of the viewport so it stays out of the page's flow.
 *
 * The demo pages announce each stage through their own live region, so this is
 * hidden from assistive technology rather than repeating it.
 */
export const DemoCallout: React.FC<{ callout?: CalloutContent }> = ({ callout }) =>
	callout
		// Keyed on the content rather than the stage: consecutive stages can
		// share a callout, and remounting between them replays the entrance
		// animation as a flicker.
		? <aside key={callout.title} className="demo-callout" aria-hidden="true">
			<span className="demo-callout__step">{callout.step}</span>
			<h3 className="demo-callout__title">{callout.title}</h3>
			<p className="demo-callout__body">{callout.body}</p>
		</aside>
		: null

```