# Alert
Full-width status surface for page-level state - saved, failed, queued.
Preview: https://design.freecodecamp.org/playground#alert
## Add to your project
Use React and TypeScript. Required packages: `react@>=18 <20`. No freeCodeCamp package is needed.
Copy the files below to the indicated paths, relative to your project root. If you change the layout, update relative imports too.
Import the CSS once from your application entry. For an entry in src/:
```ts
import './ui/theme/tokens.css';
import './ui/theme/base.css';
import './ui/alert/alert.css';
```
The theme is shared: reuse it if already installed. Fonts use /fonts/ URLs on your host. Download the font files listed in https://design.freecodecamp.org/registry/starter.md or change those URLs in your copied tokens.css.
## Example
```tsx
import { Alert } from './ui/alert/Alert';
export function Example() {
return (
All 28 tests pass. Next challenge unlocked.
You have one unsaved edit.
Sign-in failed - check your email address.
);
}
```
## Interaction guidance
Review https://www.w3.org/WAI/ARIA/apg/patterns/alert/ and test keyboard operation in your project.
## Component source
### src/ui/alert/Alert.tsx
Source: https://design.freecodecamp.org/registry/alert/Alert.tsx
```tsx
import React, { forwardRef } from 'react';
export type AlertVariant = 'info' | 'success' | 'warning' | 'danger';
export interface AlertProps extends Omit<
React.HTMLAttributes,
'title'
> {
variant?: AlertVariant;
title?: React.ReactNode;
icon?: React.ReactNode;
}
export const Alert = forwardRef(
(
{ variant = 'info', title, icon, className = '', children, ...rest },
ref
) => {
const classes = ['alert', `alert--${variant}`, className]
.filter(Boolean)
.join(' ');
const structured = title !== undefined || icon !== undefined;
return (
{icon !== undefined && (
{icon}
)}
{structured ? (
{title !== undefined &&
{title}
}
{children}
) : (
children
)}