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 designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.
Do: