EbaySnackbarDialog

A snackbar is a non-modal dialog that appears in response to a lightweight user action. It disappears automatically after a minimum of 6 seconds.

The user usually will want to manage the state of the snackbar, and so should provide the open state as a boolean as well as a function to synchronize the app state with the snackbar state when the on-close event occurs.

In the case where the application developer only wants to manage the initial state of the snackbar, the dev can choose to provide only the open state as a boolean. This is useful when a dev wants the snackbar to appear only once on initial render and then disappear.

Demo

Storybook

Import JS

import { EbaySnackbarDialog, EbaySnackbarDialogAction } from '@ebay/ui-core-react/ebay-snackbar-dialog';

Import following styles from SKIN

import '@ebay/skin/snackbar-dialog';

Usage

<EbaySnackbarDialog open>
    <p>Simple snackbar</p>
</EbaySnackbarDialog>

<EbaySnackbarDialog open>
    <p>Snackbar with action</p>
    <EbaySnackbarDialogAction accessKey="U" aria-label="Undo - Access Key: U">Undo</EbaySnackbarDialogAction>
</EbaySnackbarDialog>

Attributes

Name	Type	Stateful	Required	Description
`open`	Boolean	Yes	No	Whether snackbar is open or not.
`layout`	String	No	No	Direction of row or column for the text and the action button. Default is 'row'. Options are 'row' and 'column'.
`animated`	Boolean	Yes	No	Renders the dialog with an animation. Note that the dialog will always be present in the DOM

Events

Event	Data	Description
`onOpen`		Snackbar opened
`onClose`		Snackbar closed
`onAction`		Snackbar clicked action