Snackbar

Shows a message in a snackbar with optional actions buttons.

Props

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	-	The content of the snackbar
action	{ label: React.ReactNode; onAction: (event: React.MouseEvent<HTMLButtonElement>) => void; }	No	-	The action button of the snackbar

Variations

Without action

Result

Loading...

Live Editor

<Snackbar>
    Lorem ipsum dolor sit amet
</Snackbar>

With action

Result

Loading...

Live Editor

<Snackbar
    action={{
        label: 'Action',
        onAction: () => {}
    }}
>
    Lorem ipsum dolor sit amet
</Snackbar>