The Toast component displays brief, temporary messages that provide feedback or notifications to users. It supports different status types, customizable content, and automatic or manual dismissal.

Usage

Basic Example

A simple toast with a message.

This is a basic toast message

Show code

React

import { PlusToast } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusToast>
        This is a basic toast message
      </PlusToast>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-toast>
      This is a basic toast message
    </plus-toast>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-toast>
    This is a basic toast message
  </plus-toast>
</template>

Svelte

<plus-toast>
  This is a basic toast message
</plus-toast>

HTML

<plus-toast>
  This is a basic toast message
</plus-toast>

Status Types

Use the status prop to indicate the type of message with appropriate colors and icons.

Status messageStatus messageStatus messageStatus messageStatus message

Show code

React

import { PlusToast } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusToast status="default">
        Status message
      </PlusToast>
      <PlusToast status="info">
        Status message
      </PlusToast>
      <PlusToast status="success">
        Status message
      </PlusToast>
      <PlusToast status="warning">
        Status message
      </PlusToast>
      <PlusToast status="danger">
        Status message
      </PlusToast>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-toast status="default">
      Status message
    </plus-toast>
    <plus-toast status="info">
      Status message
    </plus-toast>
    <plus-toast status="success">
      Status message
    </plus-toast>
    <plus-toast status="warning">
      Status message
    </plus-toast>
    <plus-toast status="danger">
      Status message
    </plus-toast>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-toast status="default">
    Status message
  </plus-toast>
  <plus-toast status="info">
    Status message
  </plus-toast>
  <plus-toast status="success">
    Status message
  </plus-toast>
  <plus-toast status="warning">
    Status message
  </plus-toast>
  <plus-toast status="danger">
    Status message
  </plus-toast>
</template>

Svelte

<plus-toast status="default">
  Status message
</plus-toast>
<plus-toast status="info">
  Status message
</plus-toast>
<plus-toast status="success">
  Status message
</plus-toast>
<plus-toast status="warning">
  Status message
</plus-toast>
<plus-toast status="danger">
  Status message
</plus-toast>

HTML

<plus-toast status="default">
  Status message
</plus-toast>
<plus-toast status="info">
  Status message
</plus-toast>
<plus-toast status="success">
  Status message
</plus-toast>
<plus-toast status="warning">
  Status message
</plus-toast>
<plus-toast status="danger">
  Status message
</plus-toast>

Size

Control the toast’s dimensions using the size prop.

Toast messageToast messageToast message

Show code

React

import { PlusToast } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusToast size="sm">
        Toast message
      </PlusToast>
      <PlusToast size="md">
        Toast message
      </PlusToast>
      <PlusToast size="lg">
        Toast message
      </PlusToast>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-toast size="sm">
      Toast message
    </plus-toast>
    <plus-toast size="md">
      Toast message
    </plus-toast>
    <plus-toast size="lg">
      Toast message
    </plus-toast>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-toast size="sm">
    Toast message
  </plus-toast>
  <plus-toast size="md">
    Toast message
  </plus-toast>
  <plus-toast size="lg">
    Toast message
  </plus-toast>
</template>

Svelte

<plus-toast size="sm">
  Toast message
</plus-toast>
<plus-toast size="md">
  Toast message
</plus-toast>
<plus-toast size="lg">
  Toast message
</plus-toast>

HTML

<plus-toast size="sm">
  Toast message
</plus-toast>
<plus-toast size="md">
  Toast message
</plus-toast>
<plus-toast size="lg">
  Toast message
</plus-toast>

Kind (Visual Style)

The kind prop controls the visual appearance of the toast.

Toast with different stylesToast with different stylesToast with different styles

Show code

React

import { PlusToast } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusToast kind="default" status="info">
        Toast with different styles
      </PlusToast>
      <PlusToast kind="outlined" status="info">
        Toast with different styles
      </PlusToast>
      <PlusToast kind="dashed" status="info">
        Toast with different styles
      </PlusToast>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-toast kind="default" status="info">
      Toast with different styles
    </plus-toast>
    <plus-toast kind="outlined" status="info">
      Toast with different styles
    </plus-toast>
    <plus-toast kind="dashed" status="info">
      Toast with different styles
    </plus-toast>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-toast kind="default" status="info">
    Toast with different styles
  </plus-toast>
  <plus-toast kind="outlined" status="info">
    Toast with different styles
  </plus-toast>
  <plus-toast kind="dashed" status="info">
    Toast with different styles
  </plus-toast>
</template>

Svelte

<plus-toast kind="default" status="info">
  Toast with different styles
</plus-toast>
<plus-toast kind="outlined" status="info">
  Toast with different styles
</plus-toast>
<plus-toast kind="dashed" status="info">
  Toast with different styles
</plus-toast>

HTML

<plus-toast kind="default" status="info">
  Toast with different styles
</plus-toast>
<plus-toast kind="outlined" status="info">
  Toast with different styles
</plus-toast>
<plus-toast kind="dashed" status="info">
  Toast with different styles
</plus-toast>

With Header

Use the header prop or slot to add a title to your toast.

Your changes have been saved successfully.

Show code

React

import { PlusToast } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusToast header="Success!" status="success">
        Your changes have been saved successfully.
      </PlusToast>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-toast header="Success!" status="success">
      Your changes have been saved successfully.
    </plus-toast>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-toast header="Success!" status="success">
    Your changes have been saved successfully.
  </plus-toast>
</template>

Svelte

<plus-toast header="Success!" status="success">
  Your changes have been saved successfully.
</plus-toast>

HTML

<plus-toast header="Success!" status="success">
  Your changes have been saved successfully.
</plus-toast>

Custom Icon

Override the default status icon using the icon prop or the icon slot.

Message with custom icon

Show code

React

import { PlusToast } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusToast status="info" icon="star">
        Message with custom icon
      </PlusToast>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-toast status="info" icon="star">
      Message with custom icon
    </plus-toast>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-toast status="info" icon="star">
    Message with custom icon
  </plus-toast>
</template>

Svelte

<plus-toast status="info" icon="star">
  Message with custom icon
</plus-toast>

HTML

<plus-toast status="info" icon="star">
  Message with custom icon
</plus-toast>

Dismissible

Control whether the toast can be dismissed using the dismiss prop.

This toast can be dismissedThis toast can be dismissed

Show code

React

import { PlusToast } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusToast dismiss="true" status="warning">
        This toast can be dismissed
      </PlusToast>
      <PlusToast dismiss="false" status="warning">
        This toast can be dismissed
      </PlusToast>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-toast dismiss="true" status="warning">
      This toast can be dismissed
    </plus-toast>
    <plus-toast dismiss="false" status="warning">
      This toast can be dismissed
    </plus-toast>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-toast dismiss="true" status="warning">
    This toast can be dismissed
  </plus-toast>
  <plus-toast dismiss="false" status="warning">
    This toast can be dismissed
  </plus-toast>
</template>

Svelte

<plus-toast dismiss="true" status="warning">
  This toast can be dismissed
</plus-toast>
<plus-toast dismiss="false" status="warning">
  This toast can be dismissed
</plus-toast>

HTML

<plus-toast dismiss="true" status="warning">
  This toast can be dismissed
</plus-toast>
<plus-toast dismiss="false" status="warning">
  This toast can be dismissed
</plus-toast>

Without Status Icon

Hide the default status icon by setting status-icon to false.

Toast without status icon

Show code

React

import { PlusToast } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusToast status="success" statusIcon="false">
        Toast without status icon
      </PlusToast>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-toast status="success" status-icon="false">
      Toast without status icon
    </plus-toast>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-toast status="success" status-icon="false">
    Toast without status icon
  </plus-toast>
</template>

Svelte

<plus-toast status="success" status-icon="false">
  Toast without status icon
</plus-toast>

HTML

<plus-toast status="success" status-icon="false">
  Toast without status icon
</plus-toast>

Handling Dismissal

Listen for the plus-close event to handle toast dismissal.

Notification

Click the X button to dismiss this toast.

Show code

React

import { PlusToast } from '@plusui/react';

export default () => {
  const handleClose = () => {
    console.log('Toast was dismissed!');
    // Handle toast dismissal (e.g., remove from state)
  };

  return (
    <PlusToast status="info" dismiss onPlusClose={handleClose}>
      <div slot="header">Notification</div>
      Click the X button to dismiss this toast.
    </PlusToast>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-toast-example',
  template: `
    <plus-toast status="info" dismiss (plus-close)="handleClose()">
      <div slot="header">Notification</div>
      Click the X button to dismiss this toast.
    </plus-toast>
  `
})
export class ToastExampleComponent {
  handleClose() {
    console.log('Toast was dismissed!');
    // Handle toast dismissal
  }
}

Vue

<template>
  <plus-toast status="info" dismiss @plus-close="handleClose">
    <div slot="header">Notification</div>
    Click the X button to dismiss this toast.
  </plus-toast>
</template>

<script setup>
const handleClose = () => {
  console.log('Toast was dismissed!');
  // Handle toast dismissal
};
</script>

Svelte

<script>
  import { onMount } from 'svelte';

  let toastRef;

  onMount(() => {
    if (toastRef) {
      toastRef.addEventListener('plus-close', () => {
        console.log('Toast was dismissed!');
        // Handle toast dismissal
      });
    }
  });
</script>

<plus-toast bind:this={toastRef} status="info" dismiss>
  <div slot="header">Notification</div>
  Click the X button to dismiss this toast.
</plus-toast>

HTML

<plus-toast id="dismissible-toast-html" status="info" dismiss>
  <div slot="header">Notification</div>
  Click the X button to dismiss this toast.
</plus-toast>

<script>
  document.getElementById('dismissible-toast-html').addEventListener('plus-close', () => {
    console.log('Toast was dismissed!');
    // Handle toast dismissal
  });
</script>

Show console

Console Output:

No console output yet. Try interacting with the components above.

Clear Console

Accessibility (a11y)

• Screen Reader:
  • Uses role="status" to announce content changes to screen readers.
  • aria-live is set to "assertive" for danger/warning toasts and "polite" for others.
  • aria-atomic="true" ensures the entire toast content is announced when it appears.
  • The close button has aria-label="Close" for screen reader users.
• Required Developer Actions:
  • Provide meaningful content in the message and header slots.
  • Consider the urgency of the message when choosing status types.
  • Ensure sufficient color contrast for custom styling.

API Reference

Properties

Name	Type	Default	Description	Required
size	'sm' | 'md' | 'lg'	'md'	Size of the toast.	No
kind	'default' | 'outlined' | 'dashed'	'default'	Visual style of the toast.	No
status	'info' | 'success' | 'warning' | 'danger' | 'default'	'default'	Status variant controlling color and default icon.	No
dismiss	boolean	true	Whether to show the dismiss button.	No
statusIcon	boolean	true	Whether to show the default status icon.	No
header	string	undefined	Header text content (can also be provided via slot).	No
icon	string	undefined	Custom icon name to override the default status icon.	No
message	string	undefined	Message text content (can also be provided via slot).	No

Events

Name	Payload Type	Description
plus-close	CustomEvent<void>	Fired when the toast is dismissed.

Slots

Name	Description
default (unnamed)	The main message content of the toast.
header	Optional header content for the toast.
icon	Custom icon content to replace the status icon.

CSS Shadow Parts

Part	Description
base	The main container element.
container	The main container for content.
icon	The status icon container.
content	The container for header and message.
header	The header text element.
message	The message text element.
close-button	The close button container.

CSS Custom Properties

Name	Description
--toast-border-radius	Controls the border radius.
--toast-padding	Controls the padding.
--icon-size	Controls the status icon size.
--close-button-size	Controls the close button size.

Join the Community

Plus UI is built by the community. Join us on our platforms to contribute, get help, and stay up to date.

Figma GitHub Discord Twitter Open Collective