Dismissible

Utility for displaying different types of content that can be removed from the screen.

Import

import { Dismissible } from "reshaped";
import type { DismissibleProps } from "reshaped";

Storybook

Dismissible stories

Works with any content

Usage

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 (
    <Card>
      <Dismissible
        closeAriaLabel="Close banner"
        onClose={() => setVisible(false)}
      >
        <View backgroundColor="neutral-faded" height={10} />
      </Dismissible>
    </Card>
  );
}

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%" />
  </View>
</Dismissible>

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>

Accessibility

When using Dismissible with a close button, you should also provide the closeAriaLabel value to make the close button accessible.

Contents

Usage
Accessibility