import { Dismissible } from "reshaped";
import type { DismissibleProps } from "reshaped";
Works with any content

Dismissible provides a children slot with a reserved spot for the close button. You can then pass an onClose handler to it to toggle the visibility of it or any components it's used with.

For example, you can create a dismissible banner using Dismissible inside a Card or to close a Modal:

function Example() {
  const [visible, setVisible] = React.useState(true);

  if (!visible) return;

  return (
        closeAriaLabel="Close banner"
        onClose={() => setVisible(false)}
        <View backgroundColor="neutral-faded" height={10} />

Dismissible has a media variant for displaying media content that can be removed from the screen. It will move the close button away from the edges of the media content and will use a different variant of the button.

<Dismissible variant="media" closeAriaLabel="Close banner">
  <View aspectRatio={16 / 9}>
    <Image src="/img/examples/image-retina.webp" width="100%" />

If you want to hide the close button conditionally, we're providing a hideCloseButton property. That should help you simplify the conditional rendering implementation.

<Dismissible hideCloseButton>Dismissible content</Dismissible>
  • When using Dismissible with a close button, you should also provide the closeAriaLabel value to make the close button accessible.