Are you ready for Cyber ~~Monday~~ Week Deals?

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order! Limited offer for the first 100 people, use code 2024BWCW25 during checkout.

On this page

Angular Close Button Component

A generic Angular close button directive for dismissing content like modals and alerts.

## Examples ### Basic Provide an option to dismiss or close a component with `cCloseButton`. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default background-image.

### Disabled Disabled close buttons change their `opacity`. We've also applied `pointer-events: none` and `user-select: none` to preventing hover and active states from triggering.

### White variant Change the default `cCloseButton` to be white with the `white` boolean property.

### Sizing Provide default, `lg` and `sm` size.

--- ## API reference ### ButtonModule ```typescript import { ButtonModule } from '@coreui/angular'; @NgModule({ imports: [ButtonModule,] }) export class AppModule() { } ``` --- ### cButtonClose _directive_ ##### Inputs

|prop|description|type|default| |---|:---|:---|:---| |`disabled`| disabled attribute | `boolean` |_null_| |`size`| close button size |`sm, lg`|_undefined_| |`white`| white variant | `boolean` |_undefined_|