SideSheet

Example

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

export function SideSheetExample() {
  const [isOpen, setOpen] = useState(false);
  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Button color="tertiary" variant="filled" onClick={() => setOpen(true)}>
        Open
      </Button>
      <SideSheet className="shadow-2xl !bg-surface-bright" open={isOpen} onClose={handleClose}>
        <div className="w-[300px] p-10">
          <Text>Hello World!</Text>
        </div>
      </div>
    </Preview>
  );
}

Props

prop	type	description
open	boolean	required. if true, show the side sheet
onClose	() => void	required. on close handler
closeDelay	number	in ms. the delay before closeing the sidesheet