# @askrjs/ui/toast

> Published API exports for @askrjs/ui/toast.

Source: [https://askrjs.com/docs/reference/api/ui/toast](https://askrjs.com/docs/reference/api/ui/toast)

Status: stable. Packages: @askrjs/ui/toast.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 23 exports from the declarations shipped by @askrjs/ui.

### `Toast`

```ts
Toast: (props: ToastProps) => JSX.Element | null
```

Toast registers a notification entry with the host and returns no DOM on
its own.

### `TOAST_A11Y_CONTRACT`

```ts
TOAST_A11Y_CONTRACT: { readonly ROOT_ROLE: "status"; readonly LIVE_REGION_ATTRIBUTE: "aria-live"; readonly LIVE_REGION_VALUE: "polite"; readonly VIEWPORT_LABEL: "Notifications"; readonly AUTO_DISMISS_PAUSE: "pointer-or-focus"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; }; }
```

Toast accessibility contract.

### `ToastA11yContract`

```ts
ToastA11yContract: typeof TOAST_A11Y_CONTRACT
```

Type of the Toast A11y Contract object.

### `ToastAction`

```ts
ToastAction: { (props: ToastActionProps): JSX.Element; (props: ToastActionAsChildProps): JSX.Element; }
```

ToastAction closes the toast after handling a user-triggered action.
Renders the `toast-action` part of `toast`.

Supports polymorphic rendering via `asChild`.

### `ToastActionAsChildProps`

```ts
ToastActionAsChildProps: ButtonLikeAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Toast Action.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `type`: type?: undefined;

### `ToastActionProps`

```ts
ToastActionProps: ButtonLikeProps<'button', HTMLButtonElement>
```

Props for Toast Action.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `type`: type?: "button" | "submit" | "reset" | undefined;

### `ToastClose`

```ts
ToastClose: { (props: ToastCloseProps): JSX.Element; (props: ToastCloseAsChildProps): JSX.Element; }
```

ToastClose is the dedicated dismiss control for a toast entry.
Renders the `toast-close` part of `toast`.

Supports polymorphic rendering via `asChild`.

### `ToastCloseAsChildProps`

```ts
ToastCloseAsChildProps: ButtonLikeAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Toast Close.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

- `type`: type?: undefined;

### `ToastCloseProps`

```ts
ToastCloseProps: ButtonLikeProps<'button', HTMLButtonElement>
```

Props for Toast Close.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `onPress`: onPress?: ((event: PressEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLButtonElement>;

- `type`: type?: "button" | "submit" | "reset" | undefined;

### `ToastDescription`

```ts
ToastDescription: { (props: ToastDescriptionProps): JSX.Element; (props: ToastDescriptionAsChildProps): JSX.Element; }
```

ToastDescription marks the accessible description slot for a toast entry.
Renders the `toast-description` part of `toast`.

Supports polymorphic rendering via `asChild`.

### `ToastDescriptionAsChildProps`

```ts
ToastDescriptionAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Toast Description.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `ToastDescriptionProps`

```ts
ToastDescriptionProps: BoxProps<'div', HTMLDivElement>
```

Props for Toast Description.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `ToastHost`

```ts
ToastHost: (props: ToastHostProps) => JSX.Element
```

ToastHost owns the registry of active toast entries and the default
display duration for the family.

### `ToastHostOwnProps`

```ts
ToastHostOwnProps: {
  children?: unknown;
  id?: string;
  duration?: number;
}
```

Props for the host that owns toast timing defaults and the registry.

- `children`: children?: unknown;

- `duration`: duration?: number | undefined;

- `id`: id?: string | undefined;

### `ToastHostProps`

```ts
ToastHostProps: BoxProps<'div', HTMLDivElement> & ToastHostOwnProps
```

Props for Toast Host.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `duration`: duration?: number | undefined;

- `id`: id?: string | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

### `ToastOwnProps`

```ts
ToastOwnProps: {
  children?: unknown;
  id?: string;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  duration?: number;
  variant?: ToastVariant;
}
```

Props for a toast registration entry declared through Toast.

- `children`: children?: unknown;

- `defaultOpen`: defaultOpen?: boolean | undefined;

- `duration`: duration?: number | undefined;

- `id`: id?: string | undefined;

- `onOpenChange`: onOpenChange?: ((open: boolean) => void) | undefined;

- `open`: open?: boolean | undefined;

- `variant`: variant?: ToastVariant | undefined;

### `ToastProps`

```ts
ToastProps: BoxProps<'div', HTMLDivElement> & ToastOwnProps
```

Props for Toast.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `defaultOpen`: defaultOpen?: boolean | undefined;

- `duration`: duration?: number | undefined;

- `id`: id?: string | undefined;

- `onOpenChange`: onOpenChange?: ((open: boolean) => void) | undefined;

- `open`: open?: boolean | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `variant`: variant?: ToastVariant | undefined;

### `ToastTitle`

```ts
ToastTitle: { (props: ToastTitleProps): JSX.Element; (props: ToastTitleAsChildProps): JSX.Element; }
```

ToastTitle marks the accessible title slot for a toast entry.
Renders the `toast-title` part of `toast`.

Supports polymorphic rendering via `asChild`.

### `ToastTitleAsChildProps`

```ts
ToastTitleAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Toast Title.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `ToastTitleProps`

```ts
ToastTitleProps: BoxProps<'div', HTMLDivElement>
```

Props for Toast Title.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

### `ToastViewport`

```ts
ToastViewport: { (props: ToastViewportProps): JSX.Element; (props: ToastViewportAsChildProps): JSX.Element; }
```

ToastViewport renders the live toast stack and the notification region.
Renders the `toast-viewport` part of `toast` with `role="region"`.

Supports polymorphic rendering via `asChild`.

### `ToastViewportAsChildProps`

```ts
ToastViewportAsChildProps: BoxAsChildProps
```

Props for the `asChild` (polymorphic) rendering of Toast Viewport.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `ToastViewportProps`

```ts
ToastViewportProps: BoxProps<'div', HTMLDivElement>
```

Props for Toast Viewport.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLDivElement>;

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/ui/scroll-area/index.md) | [Next](https://askrjs.com/docs/reference/api/ui/tooltip/index.md)