Toast

Basic example

Use the exposed Toast object from the library to access all the components.

1. Session reset successfully

import { Toast } from '@streamelements/frontend-ui';

// App Root
<Toast.Provider>
  <App />

  <Toast.Viewport />
</ToastProvider>

...

export function MyComponent() {
  return <Toast.Root color="success">
        <Toast.Text>
            Session reset successfully
        </Toast.Text>
    </Toast.Root>
}

Exposed components

• Provider
• Viewport
• Root
• Text
• Button

Examples

1. Loading...
2. Session reset successfully
3. Problem with session reset
   Action
4. Session reset was unsuccessfull
   Action

<Toast.Provider>
  <Toast.Root>
    <Toast.Text>Loading...</Toast.Text>
  </Toast.Root>

  <Toast.Root color="success">
    <Toast.Text>Session reset successfully</Toast.Text>
  </Toast.Root>

  <Toast.Root color="attention">
    <Toast.Text>Problem with session reset</Toast.Text>
    <Toast.Action color="atttention">Action</Toast.Action>
  </Toast.Root>

  <Toast.Root color="error">
    <Toast.Text>Session reset was unsuccessfull</Toast.Text>
    <Toast.Action color="error">Action</Toast.Action>
  </Toast.Root>

  <Toast.Viewport />
</Toast.Provider>

Props

Property	Type	Required	Description
color	'info' | 'success' | 'attention' | 'error'	false	Sets the theme variant of the toast. Defaults to "info".