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.
The NSW Design System displays icons at four sizes (20px, 24px, 30px, 36px) depending on their type, use and screen size:
All components are responsive and meet WCAG 2.1 AA accessibility guidelines.