Toast

A feedback component displaying brief, self-destructing notification prompts at the corners of viewports.
For more information on this component configuration, visit Radix UI

Placement

Use the placement prop on the Toast.Provider to set the placement of the Toast. Values can include top-start, top, top-end, bottom-start, bottom, bottom-end.

Sizes

Use the toast-{size} class to control the component size.

Size values can include:smmd.

For more information on all available sizing utilities, visit Tailwind

With Accent

Use the decoration-accent-{position} class to add a decorative accent to the component. Refer to the Accents section for more information.

Variants

Use the variant and palette classes to control the appereance of the component.

Variant values can include solidoutlinesurfacesubtleplain.
Color palettes can include primaryneutral. For extra palettes such as warning error and more, refer to the Colors section.

Customizing

globals.css


:root {
  --ex-toast-viewport-px: calc(var(--spacing) * 6);
  --ex-toast-viewport-py: calc(var(--spacing) * 6);
 
  --ex-toast-z-index: 55;
 
  --ex-toast-font-size-sm: var(--text-xs);
  --ex-toast-font-size-md: var(--text-sm);
 
  --ex-toast-max-w-sm: var(--container-3xs);
  --ex-toast-max-w-md: var(--container-2xs);
 
  --ex-toast-gap-x-sm: calc(var(--spacing) * 2);
  --ex-toast-gap-x-md: calc(var(--spacing) * 2.5);
 
  --ex-toast-px-sm: calc(var(--spacing) * 3);
  --ex-toast-px-md: calc(var(--spacing) * 4);
 
  --ex-toast-py-sm: calc(var(--spacing) * 3);
  --ex-toast-py-md: calc(var(--spacing) * 4);
 
  --ex-toast-radius-sm: var(--radius-sm);
  --ex-toast-radius-md: var(--radius-sm);
 
  --ex-toast-shadow-sm: var(--shadow-sm);
  --ex-toast-shadow-md: var(--shadow-sm);
 
  --ex-toast-indicator-font-size-sm: var(--text-lg);
  --ex-toast-indicator-font-size-md: var(--text-xl);
 
  --ex-toast-content-gap-x-sm: calc(var(--spacing) * 1.5);
  --ex-toast-content-gap-x-md: calc(var(--spacing) * 2);
 
  --ex-toast-content-gap-y-sm: calc(var(--spacing) * 2);
  --ex-toast-content-gap-y-md: calc(var(--spacing) * 2);
 
  --ex-toast-title-font-family: var(--font-sans);
  --ex-toast-title-font-weight: var(--font-weight-semibold);
 
  --ex-toast-title-font-size-sm: var(--text-sm);
  --ex-toast-title-font-size-md: var(--text-base);
 
  --ex-toast-description-font-family: var(--font-sans);
  --ex-toast-description-font-weight: var(--font-weight-normal);
  --ex-toast-description-opacity: var(--ex-options-opacity-muted);
 
  --ex-toast-description-font-size-sm: var(--text-xs);
  --ex-toast-description-font-size-md: var(--text-sm);
 
  --ex-toast-indicator-font-size-sm: var(--text-lg);
  --ex-toast-indicator-font-size-md: var(--text-xl);
}

API

For more information on this component configuration, visit Radix UI

Toast Provider

Prop	Type	Default
`duration`	`number`	`5000`
`swipeDirection`	`enum of ["up", "down", "left", "right"]`	`right`
`swipeThreshold`	`number`	`50`

Toast

Element	Selector
`Toast`	`.ex-toast`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`defaultOpen`	`boolean`	`true`
`duration`	`number`
`forceMount`	`boolean`	`false`
`open`	`boolean`
`type`	`enum of ["background", "foreground"]`	`foreground`
`onPause`	`function`
`onResume`	`function`
`onSwipeStart`	`function`
`onSwipeMove`	`function`
`onSwipeEnd`	`function`
`onSwipeCancel`	`function`
`onOpenChange`	`function`

Toast Viewport

Element	Selector
`Toast.Viewport`	`.ex-toast-viewport`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Toast Content

Element	Selector
`Toast.Content`	`.ex-toast-content`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Toast Title

Element	Selector
`Toast.Title`	`.ex-toast-title`

Prop	Type	Default
`as`	`ElementType`	`h4`
`asChild`	`boolean`	`false`

Toast Description

Element	Selector
`Toast.Description`	`.ex-toast-description`

Prop	Type	Default
`as`	`ElementType`	`p`
`asChild`	`boolean`	`false`

Toast Action

Element	Selector
`Toast.Action`	`.ex-toast-action`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`altText`	`string`	`action`

Toast Close

Element	Selector
`Toast.Close`	`.ex-toast-close`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`