Angular Close Button Component

Close Button

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

Available in Other JavaScript Frameworks

CoreUI Angular Close Button Component is also available for Bootstrap, React, and Vue. Explore framework-specific implementations below:

On this page

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.

import { Component } from '@angular/core';
import { ButtonCloseDirective } from '@coreui/angular';

@Component({
  selector: 'docs-close-button',
  templateUrl: './close-button.component.html',
  imports: [ButtonCloseDirective]
})
export class CloseButtonComponent {}

<button cButtonClose></button>

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.

import { Component } from '@angular/core';
import { ButtonCloseDirective } from '@coreui/angular';

@Component({
  selector: 'docs-close-button-disabled',
  templateUrl: './close-button-disabled.component.html',
  imports: [ButtonCloseDirective]
})
export class CloseButtonDisabledComponent {}

<button cButtonClose disabled></button>

White variant

Change the default cCloseButton to be white with the white boolean property.

import { Component } from '@angular/core';
import { ButtonCloseDirective } from '@coreui/angular';

@Component({
  selector: 'docs-close-button-white-variant',
  templateUrl: './close-button-white-variant.component.html',
  imports: [ButtonCloseDirective],
  host: { class: 'bg-dark p-4 rounded-top-2 d-block', 'data-coreui-theme': 'dark' }
})
export class CloseButtonWhiteVariantComponent {}

<button cButtonClose white></button>

Sizing

Provide default, lg and sm size.

import { Component } from '@angular/core';
import { ButtonCloseDirective } from '@coreui/angular';

@Component({
  selector: 'docs-close-button-sizing',
  templateUrl: './close-button-sizing.component.html',
  imports: [ButtonCloseDirective]
})
export class CloseButtonSizingComponent {}

<button cButtonClose size="lg" ></button>
<button cButtonClose ></button>
<button cButtonClose size="sm" ></button>

API reference

ButtonModule

import { ButtonModule } from '@coreui/angular';

@NgModule({
    imports: [ButtonModule,]
})
export class AppModule() { }

cButtonClose

directive

jsx

import { ButtonCloseDirective } from '@coreui/angular'

Property	Default	Type
active	`false`	`boolean`
Toggle the active state for the component
color	`'primary'`	`string`
Sets the color context of the component to one of CoreUI’s themed colors
dark	`false`	`boolean`
Sets a darker color scheme. If the colorScheme is set to 'dark', the dark theme will be applied.
disabled	`false`	`boolean`
Toggle the disabled state for the component.
shape	-	`string`
Select the shape of the component.
size	`''`	`''`, `'sm'`, `'lg'`
Size the component small or large.
tabindex	`undefined`	`number`
The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating).
type	`'button'`	`ButtonType`
Specifies the type of button. Always specify the type attribute for the `<button>` element. Different browsers may use different default types for the `<button>` element.
variant	-	`'ghost'`, `'outline'`
Set the button variant to an outlined button or a ghost button.
whiteDeprecated 5.0.0	`false`	`boolean`
Change the default color to white. Use `cButtonClose dark` instead.