Skip to main content

Snackbar

Example

import { useState } from 'react';
import Snackbar from '@mavvy/m3-ui/Snackbar';
import Button from '@mavvy/m3-ui/Button';
import Text from '@mavvy/m3-ui/Text';

function SnackbarExample() {
const [isOpen, setIsOpen] = useState(false);
const centered = false;
const color = undefined;
const duration = 3000;
const showCloseIcon = true;
const action = {
text: 'Action',
fn: () => setIsOpen(false),
};

const handleSelect = () => {
setIsOpen((v) => !v);
};

return (
<div>
<Button color="tertiary" variant="filled" disabled={isOpen} onClick={handleSelect}>
Show
</Button>
<Snackbar
action={action}
color={color}
accentColor="on-primary"
centered={centered}
showCloseIcon={showCloseIcon}
open={isOpen}
onClose={() => setIsOpen(false)}
duration={duration}
>
<Text component="span" color="on-inverse-surface">
Hello World!
</Text>
</Snackbar>
</div>
);
}

Props

proptypedescription
openbooleanrequired. if true, show the snackbar
onClose() => voidrequired. on close handler
colorColorcomponent color
accentColorColorcomponent accent color
durationnumberin ms. duration to show the snackbar
centeredbooleanif true, will center the snackbar horizontally
showCloseIconbooleanif true, shows a close icon button
action{text:string, fn: () => void}render an action text button