Dismissible

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


Usage

Dismissible provides a children slot with a reserved spot for the close button.

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.

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

Composition

In components like Modal or Popover, you would usually like to display its title with Dismissible but make the rest of the content full width. To achieve that, you can group Dismissible with other components.

Accessibility

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