Skip to main content
cngx-src documentation

CngxCloseButton

ComponentPrimaryOnPushNo encapsulationv0.1.0WCAG AA

projects/common/interactive/close-button/close-button.ts

GitHub

Import#

import { CngxCloseButton } from '@cngx/common/interactive'

Description#

Shared close/dismiss button molecule.

Composes the native <button> shell with an optional projected icon and the CNGX_CLOSE_ICON DI swap; owns ARIA wiring, focus ring, density, and a default X glyph as the projection fallback.

Used internally by CngxAlert, CngxToastOutlet, and CngxPopoverPanel. Can also be used standalone by consumers for dialogs, drawers, chips, etc.

All visual properties are CSS Custom Properties - density is controlled via the feedback.density() SCSS mixin or direct overrides.

Standalone

<cngx-close-button label="Close dialog" (click)="close()" />

Inside a component (click handled by parent)

<cngx-close-button label="Close" />

https://cngxjs.github.io/cngx/examples/#/common/interactive/close-button/basic https://cngxjs.github.io/cngx/examples/#/common/interactive/close-button/projected-icon https://cngxjs.github.io/cngx/examples/#/common/interactive/close-button/contextual-labels https://cngxjs.github.io/cngx/examples/#/common/interactive/close-button/inside-a-dismissible-card

Related#

Metadata#

Selector
cngx-close-button
Change detection
ChangeDetectionStrategy.OnPush
Encapsulation
ViewEncapsulation.None
Style URLs
./close-button.css
Imports
NgComponentOutlet

Relationships

Used by5

componentCngxAlertInline alert atom with enter/exit animations, state-driven visibility, auto-dismiss with pause-on-hover/focus, and op…
componentCngxAlertStackScoped alert stack - renders alerts from its own `CngxAlerter` instance.
componentCngxBannerOutletBanner outlet - renders the global banner stack at the top of the page.
componentCngxPopoverPanelRich popover panel molecule with header/body/footer slots, variant styling, arrow, close button, and content state te…
componentCngxToastOutletToast outlet - renders the toast stack at a fixed viewport position.

Depends on1

NgComponentOutletcomponent

Index#

Inputs

label

Inputs#

label#string
input()Required

Required accessible label for the inner <button> (aria-label). Describe the dismissable artifact, not the affordance: "Close session-expired alert", not "Close". A bare "Close" reads identically across every dismiss target on the page.

Default visuals for CngxCloseButton. The host carries .cngx-close-button and renders with display: contents so the inner .cngx-close-button__btn carries the box; the glyph projects into .cngx-close-button__icon. Idle state is muted via opacity; hover lifts to full opacity plus a subtle neutral wash.

State modifiers

State is driven by pseudo-classes on the inner button rather than host modifier classes:

  • :hover - opacity to --cngx-close-button-hover-opacity plus --cngx-close-button-hover-bg wash
  • :focus-visible - outline via --cngx-close-button-focus-outline
    • offset, opacity forced to 1
  • :active - opacity to --cngx-close-button-active-opacity

Slots

  • .cngx-close-button__btn - the actual focusable <button>
  • .cngx-close-button__icon - projected glyph (defaults to a 16px box)

Inheritance

Layout tokens cascade through the foundation:

  • --cngx-close-button-padding -> --cngx-space-sm
  • --cngx-close-button-radius -> --cngx-radius-sm
  • --cngx-close-button-color - direct (defaults to currentColor)

Dark mode

Three hooks flip the hover wash from oklch(0 0 0 / 0.04) to oklch(1 0 0 / 0.06) so the subtle hover surface stays visible against a dark page:

  • prefers-color-scheme: dark
  • [data-color-scheme="dark"]
  • .dark class

A matching [data-color-scheme="light"] / .light block pins the light value so explicit-light overrides win over the media query.

Index#

Surface

--cngx-close-button-bg--cngx-close-button-border--cngx-close-button-color

Layout

--cngx-close-button-size--cngx-close-button-padding--cngx-close-button-radius--cngx-close-button-icon-size

State / Idle

--cngx-close-button-opacity

Motion

--cngx-close-button-transition

State / Hover

--cngx-close-button-hover-opacity--cngx-close-button-hover-bg

State / Focus

--cngx-close-button-focus-outline--cngx-close-button-focus-offset

State / Active

--cngx-close-button-active-opacity

Surface

--cngx-close-button-bg#*
Default value none

Background of the resting button.

--cngx-close-button-border#*
Default value none

Border shorthand of the resting button.

--cngx-close-button-color#*
Default value currentColor

Glyph color. Defaults to currentColor.

Layout

--cngx-close-button-size#<length>
Default value 32px

Minimum hit-target size of the button (both axes).

--cngx-close-button-padding#<length>
Default value 8px

Padding shorthand. Falls back to --cngx-space-sm.

--cngx-close-button-radius#<length>
Default value 4px

Corner radius. Defaults to --cngx-radius-sm.

--cngx-close-button-icon-size#<length>
Default value 16px

Width + height of the inner icon slot.

State / Idle

--cngx-close-button-opacity#<number>
Default value 0.5

Resting opacity. The hover state lifts to full opacity.

Motion

--cngx-close-button-transition#<time>
Default value 150ms

Transition duration for opacity / background changes.

State / Hover

--cngx-close-button-hover-opacity#<number>
Default value 1

Opacity multiplier applied on hover.

--cngx-close-button-hover-bg#<color>
Default value oklch(0 0 0 / 0.04)

Background tint applied on hover - a subtle neutral overlay. inherits: true so the :root dark-mode override reaches the inner <button> on hover.

State / Focus

--cngx-close-button-focus-outline#*
Default value 2px solid currentColor

Focus-ring outline shorthand.

--cngx-close-button-focus-offset#<length>
Default value 2px

Outline offset of the focus ring.

State / Active

--cngx-close-button-active-opacity#<number>
Default value 0.8

Opacity applied during the active (pressed) state.

Enter to selectArrow Down Arrow Up to navigateEsc to close