Pattern
Choose close controls based on reopening: ‘X’ icons for dialogs, ‘Hide this message’ for permanent dismissals, toggles for reversible actions.
Use this guidance to choose the correct way for users to close, hide or dismiss interactive elements. The control you use should reflect whether the element can be reopened, whether closing is reversible, and the effect on the user’s task.
Do not use any closing or dismissing control for elements that do not hide content or change state.
Use the close ‘X’ icon for components that interrupt the user’s journey or obscure other content, and can be reopened, like a dialog modal.
Position the icon in the top right of the component, ensure it is keyboard accessible and using it does not cause loss of data or any irreversible actions.
Do not use the icon for alerts or notifications that disappear permanently.
Use a ‘Hide this message’ text link for banners or notifications that cannot be restored once dismissed.
Use it for:
This makes the irreversibility clearer that an ‘X’ icon.
Components with a toggle reveal or hide content without removing it from the page or interrupting their flow.
Use them when:
Examples of components with a toggle include accordions and the details component.