Close button

A close button is a graphical element used to dismiss or close windows, dialogs, or other UI elements.

A close button is a <button> element with the class .nsw-icon-button. We use the 'close' material icon as the X icon. This icon is wrapped in a <span> with the attribute aria-hidden="true", so screen readers don't read the X icon.

The button also includes a <span> with the .sr-only class to tell screen readers what the button's purpose is.

Show code Hide code

Sizing

The NSW Design System displays icons at four sizes (20px, 24px, 30px, 36px) depending on their type, use and screen size:

Show code Hide code

Functionality

A close button provides the control for dismissing an associated interface element, but does not provide dismissal functionality itself. Implementers must connect the button to the element and action it controls.

Only show a close button when it can perform its intended action. If the action relies on JavaScript, conditionally show the button after the JavaScript and its event handler have successfully initialised. This avoids presenting users with a control that appears functional but cannot perform its action.

Where appropriate, NSW Design System components use the hidden attribute to keep controls out of view until the JavaScript they rely on is ready.

Accessibility

All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

Do:

Wrap icons within their interactive component
Specify if an icon is decorative and informative by assigning the appropriate property.
Use descriptive and meaningful titles for informative icons