A NSW Government website
NSW Government
NSW Design System v3.28.1

Close button

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

Demo & code

Show code Hide code

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.

Guidance

Do
  • wrap the close icon within a <button> element using the .nsw-icon-button class
  • mark the decorative X icon with aria-hidden="true"
  • provide a descriptive accessible name using visually hidden text
  • connect the button to its dismissal action before showing it
Don't
  • use the X icon alone as the button's accessible name
  • expose the decorative X icon to screen readers
  • show a close button when it cannot perform its intended action
  • use a close button for an action other than dismissing its associated interface element

Sizing

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

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.