Dismissible

<View width="300px" maxWidth="100%">
  <Dismissible closeAriaLabel="Close banner">
    <View height=${control.height}px />
  </Dismissible>
</View>

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">
  <AspectRatio ratio={16 / 9}>
    <Image src="/img/examples/image-retina.webp" width="100%" />
  </AspectRatio>
</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>