# presentation/components/overlay.component.ts

> 34 lines of code and 3 definitions.

Tree: Site tree
Language: typescript
Layer: product
Canonical: https://banes-lab.com/anatomy/tree#file-presentation-components-overlay-component-ts
Source text: https://banes-lab.com/assets/sources/source.5d241825b5d84809c39da2b74299c5335252be6d314073869ebb77b6562f3126.generated.txt

## Definitions

- `createExpandButton` (lexical_declaration, line 20, exported)
- `createCloseButton` (lexical_declaration, line 8, exported)
- `button` (lexical_declaration, line 27, exported)

## Uses

- [core/buses/base.bus.ts](https://banes-lab.com/source/tree/core/buses/base.bus.ts.md)

## Used by

- [presentation/components/code.component.ts](https://banes-lab.com/source/tree/presentation/components/code.component.ts.md)

## Source

```typescript
import { CLOSE_DIALOG_LABEL, CLOSE_TITLE } from "#configuration/strings/code.strings";
import { CLOSE_ICON, EXPAND_ICON, ICON_BASE_CLASS } from "#configuration/icons/element.icons";
import { OVERLAY_DISMISSED, OVERLAY_REQUESTED } from "#core/ids/overlay.ids";
import type { ElementChild } from "#types/element.types";
import { createElement } from "#core/factories/element.factory";
import { emitEvent } from "#core/buses/base.bus";

export const createCloseButton = function createCloseButton(): HTMLButtonElement {
    const button = createElement("button", {
        attributes: { "aria-label": CLOSE_DIALOG_LABEL, title: CLOSE_TITLE, type: "button" },
        children: [createElement("i", { className: `${ICON_BASE_CLASS} ${CLOSE_ICON}` })],
        className: "overlay-close",
    });
    button.addEventListener("click", () => {
        emitEvent({ name: OVERLAY_DISMISSED });
    });
    return button;
};

export const createExpandButton = function createExpandButton(
    className: string,
    tooltip: string,
    title: string,
    content: () => Element,
    label: readonly ElementChild[] = [],
): HTMLButtonElement {
    const button = createElement("button", {
        attributes: { title: tooltip, type: "button" },
        children: [createElement("i", { className: `${ICON_BASE_CLASS} ${EXPAND_ICON}` }), ...label],
        className,
    });
    button.addEventListener("click", () => {
        emitEvent({ content: content(), name: OVERLAY_REQUESTED, title });
    });
    return button;
};
```