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

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