> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Toast

> Display status messages with optional details, actions, and progress.

`Toast` renders one notification. Your application controls when it appears, its position, and when it is removed.

## Dismissible notification

```tsx theme={null}
import { useState } from 'react';
import { Toast } from 'twenty-ui/feedback';

export const SaveNotification = () => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <button type="button" onClick={() => setVisible(true)}>
        Show saved notification
      </button>
      {visible && (
        <Toast
          variant="success"
          description="Your changes are available to your team."
          duration={6000}
          onClose={() => setVisible(false)}
        >
          Record saved
        </Toast>
      )}
    </>
  );
};
```

`onClose` is called by the close button and when the countdown completes. Remove the toast in that callback. The countdown defaults to 6,000 milliseconds and pauses while the pointer is over the toast.

## Progress and cancellation

```tsx theme={null}
import { Toast } from 'twenty-ui/feedback';

type ImportProgressProps = { progress: number; onCancel: () => void };

export const ImportProgress = ({ progress, onCancel }: ImportProgressProps) => (
  <Toast
    variant="info"
    progress={progress}
    description="You can continue working while the import runs."
    onCancel={onCancel}
    cancelLabel="Cancel import"
  >
    Importing records: {progress}%
  </Toast>
);
```

Passing `progress` supplies a percentage and disables the countdown. Cancellation invokes `onCancel`; the parent owns cancellation and removal. `action` accepts a React node for a footer action.

## Appearance and announcements

`variant` accepts `default`, `error`, `success`, `info`, or `warning`. Each variant supplies an icon and theme colors. Use `icon` to replace the icon and `iconLabel` when the default icon needs its own accessible name.

The default role is `status` with polite announcements. Use `role="alert"` for urgent feedback. Set `cancelLabel` and `closeLabel` to localize the controls, and allow enough time to read the content or interact with its actions.

## Props

The reference is generated from the public component types. Native attributes, including accessible names and event handlers, are also accepted on parts that render elements.

<ParamField body="action" type="ReactNode">
  Content rendered in the footer, such as an action button.
</ParamField>

<ParamField body="cancelLabel" type="string" default="Cancel">
  Label of the cancel button.
</ParamField>

<ParamField body="closeLabel" type="string" default="Close">
  Accessible name of the close button.
</ParamField>

<ParamField body="description" type="ReactNode">
  Supporting content rendered below the message.
</ParamField>

<ParamField body="duration" type="number" default="6000">
  Milliseconds before `onClose` is called. The countdown pauses while the
  pointer is over the toast.
</ParamField>

<ParamField body="icon" type="ReactNode">
  Replaces the variant's icon.
</ParamField>

<ParamField body="iconLabel" type="string">
  Accessible name of the default icon. Without it, the icon is hidden from
  assistive technology.
</ParamField>

<ParamField body="onCancel" type="(() => void)">
  Called when the cancel button is clicked. The button renders only when
  this callback is provided.
</ParamField>

<ParamField body="onClose" type="(() => void)">
  Called when the close button is clicked or the countdown completes. The
  button renders only when this callback is provided.
</ParamField>

<ParamField body="progress" type="number">
  Completion percentage shown in the progress bar. When set, the countdown
  is disabled.
</ParamField>

<ParamField body="render" type="RenderProp<Record<string, unknown>>">
  Replaces the rendered element or composes it with another component.
  Accepts a React element or a function that returns the element to render.
</ParamField>

<ParamField body="variant" type="&#x22;success&#x22; | &#x22;warning&#x22; | &#x22;default&#x22; | &#x22;error&#x22; | &#x22;info&#x22;" default="default">
  Visual variant that selects the icon and colors.
</ParamField>