Close Button

A compact dismiss control for dialogs, modals, and panels. Apply av-close-button to a native <button> element.

Import

import { AvCloseButtonComponent } from '@avesra/angular';

Usage

Renders a built-in close icon by default. Always provide an aria-label for screen readers.

import { Component } from '@angular/core';
import { AvCloseButtonComponent } from '@avesra/angular';

@Component({
  selector: 'app-close-button-default-demo',
  imports: [AvCloseButtonComponent],
  template: `<button av-close-button aria-label="Close"></button>`,
})
export class CloseButtonDefaultDemo {}

Interactive

Handle dismissal with the native (click) event. Update aria-label dynamically when the context changes.

Clicked: 0 times

import { Component, computed, signal } from '@angular/core';
import { AvCloseButtonComponent } from '@avesra/angular';

@Component({
  selector: 'app-close-button-interactive-demo',
  imports: [AvCloseButtonComponent],
  template: `<div class="flex flex-col items-center justify-center gap-4">
  <button
    av-close-button
    [attr.aria-label]="ariaLabel()"
    (click)="increment()"
  ></button>
  <span class="text-sm text-muted">Clicked: {{ count() }} times</span>
</div>`,
})
export class CloseButtonInteractiveDemo {
  readonly count = signal(0);
  readonly ariaLabel = computed(() => `Close (clicked ${this.count()} times)`);

  increment(): void {
    this.count.update((value) => value + 1);
  }
}

With Custom Icon

Set [useDefaultIcon]="false" and project a custom icon as a child element.

Custom Icon

Alternative Icon

import { Component } from '@angular/core';
import { AvCloseButtonComponent } from '@avesra/angular';

import { AppIconComponent } from '../../components/app-icon/app-icon.component';

@Component({
  selector: 'app-close-button-with-custom-icon-demo',
  imports: [AvCloseButtonComponent, AppIconComponent],
  template: `<div class="flex items-center gap-4">
  <div class="flex flex-col items-center gap-2">
    <button av-close-button [useDefaultIcon]="false" aria-label="Close">
      <app-icon icon="solar:close-circle-linear" size="16" />
    </button>
    <span class="text-xs text-muted">Custom Icon</span>
  </div>
  <div class="flex flex-col items-center gap-2">
    <button av-close-button [useDefaultIcon]="false" aria-label="Close">
      <app-icon icon="solar:close-square-linear" size="16" />
    </button>
    <span class="text-xs text-muted">Alternative Icon</span>
  </div>
</div>`,
})
export class CloseButtonWithCustomIconDemo {}

Disabled

Set [disabled]="true" to prevent interaction. The directive sets native disabled and aria-disabled on the host element.

import { Component } from '@angular/core';
import { AvCloseButtonComponent } from '@avesra/angular';

@Component({
  selector: 'app-close-button-disabled-demo',
  imports: [AvCloseButtonComponent],
  template: `<button av-close-button aria-label="Close" [disabled]="true"></button>`,
})
export class CloseButtonDisabledDemo {}

Pending

Set [pending]="true" to block interaction and apply data-pending styling while an async dismiss action is in progress.

import { Component } from '@angular/core';
import { AvCloseButtonComponent } from '@avesra/angular';

@Component({
  selector: 'app-close-button-pending-demo',
  imports: [AvCloseButtonComponent],
  template: `<button av-close-button aria-label="Close" [pending]="true"></button>`,
})
export class CloseButtonPendingDemo {}

Anatomy

Close Button uses the av-close-button attribute selector on a native button. Content is projected via ng-content; the default icon renders when useDefaultIcon is true.

<button av-close-button aria-label="Close"></button>

Styling

Custom Styling

Extend appearance by passing additional Tailwind CSS classes on the native <button> element.

import { Component } from '@angular/core';
import { AvCloseButtonComponent } from '@avesra/angular';

@Component({
  selector: 'app-close-button-custom-styling-demo',
  imports: [AvCloseButtonComponent],
  template: `<button
  av-close-button
  class="size-8 rounded-full bg-danger-soft text-danger hover:bg-danger-soft-hover"
  aria-label="Close"
></button>`,
})
export class CloseButtonCustomStylingDemo {}

CSS Classes

Avesra uses BEM-style classes for predictable customization. Override them in @layer components or pass utility classes directly.

.av-close-button — Base close button styles
.av-close-button--default — Default visual variant

Interactive States

Close Button styles support both CSS pseudo-classes and data attributes:

Hover::hover or [data-hovered="true"]
Pressed::active or [data-pressed="true"]
Focus::focus-visible or [data-focus-visible="true"]
Disabled::disabled or [aria-disabled="true"]
Pending:[data-pending="true"]

Accessibility

Close Button is an icon-only native button with a default accessible name:

Default ariaLabel of "Close" — override for context-specific dismiss actions
Native <button type="button"> semantics
Keyboard activation via Enter and Space
Visible focus ring via :focus-visible
aria-disabled when [disabled]="true" or [pending]="true"

API

Prop	Type	Default	Description
`variant`	`'default'`	`'default'`	Visual style variant.
`ariaLabel`	`string`	`'Close'`	Accessible label for the close button.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Native button type.
`disabled`	`boolean`	`false`	Disables interaction.
`pending`	`boolean`	`false`	Shows pending state and blocks interaction.
`useDefaultIcon`	`boolean`	`true`	Renders the built-in close icon when true.