Dismissible

Dismissible is a utility for displaying different types of content, that can be removed from the screen.
Works with any content


Usage

Dismissible provides a children slot that will always have 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 the edges of the media content and will use a different variant of the button.

If you're using Dismissible to build another component - sometimes you may want to make the close button optional. In order to avoid optional rendering of the component and rebuilding its layout - you can use hideCloseButton property.

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 stack Dismissible with other components.

Accessibility

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

Properties

NameTypeDefaultRequiredComment
variantmedia-false
childrenReact.ReactNode-false
onClose() => {}-false
closeAriaLabelstring-trueAccessibility label for the close button, required when the button is present
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element