In Review

Toast

Variants

Toast without trigger

This toast will automatically appear when the page loads.
Refresh the current to see the toast being rendered

{{ govieToast({
  "title": "Toast",
  "description": "This toast has rendered on page load",
}) }}

import { Toast } from '@govie-ds/react';

<Toast 
 title="Toast" 
 description="This toast has rendered on page load" 
/>

Info Toast with trigger

{{ govieToast({
  "title": "Toast Triggered",
  "description": "This is an info toast",
  "trigger": {
    "content": "Trigger Toast"
  }
}) }}

import { Toast } from '@govie-ds/react';

<Toast 
 title="Toast Triggered" 
 description="This is an info toast" 
 trigger={<Button>Trigger Toast</Button>}
/>

Success Toast with trigger

{{ govieToast({
  "title": "Toast Triggered",
  "description": "This is a success toast",
  "variant": "success",
  "trigger": {
    "content": "Trigger Toast"
  }
}) }}

import { Toast } from '@govie-ds/react';

<Toast 
 title="Toast Triggered" 
 variant="success" 
 description="This is a success toast" 
 trigger={<Button>Trigger Toast</Button>}
/>

Error Toast with trigger

{{ govieToast({
  "title": "Toast Triggered",
  "description": "This is an error toast",
  "variant": "danger",
  "trigger": {
    "content": "Trigger Toast"
  }
}) }}

import { Toast } from '@govie-ds/react';

<Toast 
 title="Toast Triggered" 
 variant="danger" 
 description="This is an error toast" 
 trigger={<Button>Trigger Toast</Button>}
/>

Warning Toast with trigger

{{ govieToast({
  "title": "Toast Triggered",
  "description": "This is a warning toast",
  "variant": "warning",
  "trigger": {
    "content": "Trigger Toast"
  }
}) }}

import { Toast } from '@govie-ds/react';

<Toast 
 title="Toast Triggered" 
 variant="warning" 
 description="This is a warning toast" 
 trigger={<Button>Trigger Toast</Button>}
/>

Usage

Best Practices

When to use this component

When not to use this component

Status

Figma Library	Considering
Local HTML	N/A
Global HTML	Beta
Global React	Beta