Dismissible

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:

const Component = () => {
  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>Content</Dismissible>

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