Close Button

The Close Button dismisses dialogs, modals, alerts and other dismissible elements. Applied via the closeButton directive, it adds a standard close (×) affordance and accessible semantics to its host element.

Overview

Examples

Usage

Use the button through its directive selector on any element, or through its component selector. The directive form is preferred for new code; the component form remains supported.

html

<button (click)="onClose()" aria-label="Close" closeButton mat-button></button>

API

A dismiss button applied via the closeButton directive. It adds close-button (secondary-button) styling to its host element and exposes no configurable inputs or outputs of its own.

This button exposes no configurable inputs of its own.

See the Buttons introduction for the shared inputs, outputs and base-button API.