Dismissible Action Banner CTA Block for React

The block only keeps it in state, so a reload shows the banner again. Save the choice where it suits you: a cookie lets the server render the page with the banner already closed, so it never flashes; localStorage has to be read after the first render. Store "Not now" with a date and show the banner again after a week, and store "Don't show again" with no date.

The banner sits in a one-row CSS grid, and the Undo row in another. Hiding it eases the row from 1fr to 0fr while the Undo row eases open, over 300 ms, so the page height barely changes and nothing is measured in script. The hidden banner becomes inert and invisible, so it leaves the tab order and the accessibility tree. With reduced motion turned on it switches at once.

Choosing in the popover closes it, and focus moves to Undo, so a keyboard user is never left on a control that has gone. Undo restores the banner and moves focus back to the close button. A hidden live region announces "Banner hidden" with the choice made, and "Survey banner restored" after Undo.

The close button is named "Dismiss the survey banner" and opens a popover that closes on Escape and when you click away. The popover is controlled with open and onOpenChange, and each choice sets it to closed.

Take the survey is a link with href="#": point it at your survey. The Shine Button renders the link it's given with render, with nativeButton={false}.

The text and badge wrap on their own lines, and the Shine Button and the close button drop to a second row; the divider is hidden there. Nothing has a fixed width, so it holds at 320 px, and the close button is a 32 px target.