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.

Sizing

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

Accessibility

All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

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