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

Usage

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

For example, you can create a dismissible banner using Dismissible inside a Card, or use it 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 moves the close button away from the edges of the media content and uses 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, use the hideCloseButton property. This helps simplify the conditional rendering implementation.


<Dismissible hideCloseButton>Dismissible content</Dismissible>

Accessibility

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

Contents

Usage
Accessibility