Toast

Basic example

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

Toast is available in browser only mode

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

Toast is available in browser only mode

<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".