# Toast
Transient status surface - Ark UI toaster machine, reduced-motion aware.
Preview: https://design.freecodecamp.org/playground#toast
## Add to your project
Use React and TypeScript. Required packages: `react@>=18 <20`, `@ark-ui/react@^5.0.0`. 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/toast/toast.css';
import './ui/button/button.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 { Button } from './ui/button/Button';
import { Toaster, createToaster } from './ui/toast/Toast';
const toaster = createToaster({});
export function SaveNotice() {
return (
<>
);
}
```
## Interaction guidance
Review https://www.w3.org/WAI/ARIA/apg/patterns/alert/ and test keyboard operation in your project.
## Component source
### src/ui/toast/Toast.tsx
Source: https://design.freecodecamp.org/registry/toast/Toast.tsx
```tsx
import React, { forwardRef } from 'react';
import {
Toast as ArkToast,
Toaster as ArkToaster,
createToaster as arkCreateToaster,
type CreateToasterProps,
type CreateToasterReturn,
type ToastOptions
} from '@ark-ui/react/toast';
export type ToastVariant = 'info' | 'success' | 'warning' | 'danger';
export interface ToastProps extends Omit<
React.HTMLAttributes,
'title'
> {
variant?: ToastVariant;
title?: React.ReactNode;
description?: React.ReactNode;
/** Emit a close (`×`) button wired to `onDismiss`. Default: true. */
dismissible?: boolean;
onDismiss?: () => void;
}
export const Toast = forwardRef(
(
{
variant = 'info',
title,
description,
dismissible = true,
onDismiss,
className = '',
children,
...rest
},
ref
) => {
const classes = ['toast', `toast--${variant}`, className]
.filter(Boolean)
.join(' ');
const role = variant === 'danger' ? 'alert' : 'status';
return (