---
name: "[up-accept]"
area: "API"
kind: "HTML attribute"
parent: "up.layer module"
url: "https://unpoly.com/api/up-accept"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.layer module](https://unpoly.com/api/up.layer.md)</nav>

# [up-accept]

[Accepts](https://unpoly.com/learn/closing-overlays.md) the [current layer](https://unpoly.com/api/up.layer.current.md) when this element is clicked or submitted.

<nav aria-label="Guides">

- [Learn: Closing overlays](https://unpoly.com/learn/closing-overlays.md)

</nav>

<nav aria-label="Contents">

#### Contents

- [On a button](#on-a-button)
- [On a hyperlink](#on-a-hyperlink)
- [On a form](#on-a-form)
- [Modifying attributes](#attributes)

</nav>

## On a button {#on-a-button}

To accept the [current layer](https://unpoly.com/api/up.layer.current.md) when a button is clicked, use an `[up-accept]` attribute:

```html
<button up-accept>Close overlay</button>
```

This button will accept the overlay with the value `{ id: 5 }`:

```html
<button up-accept="{ id: 5 }">Choose user #5</button>
```

See [Closing when a button is clicked](https://unpoly.com/learn/closing-overlays.md#on-click).

## On a hyperlink {#on-a-hyperlink}

When [reusing a page within an overlay](https://unpoly.com/learn/subinteractions.md#reusing-existing-screens), the same link may need to close the overlay, but navigate somewhere else when the page is shown on the root layer.

In this case, use a hyperlink (`<a>`) with a fallback URL in its `[href]` attribute:

```html
<a href="/list" up-accept>Finish</a>
```

Unpoly will only navigate to `/list` when this link is clicked in the [root layer](https://unpoly.com/api/up.layer.md). In an overlay, the `click` event is prevented and the overlay is accepted.

See [Closing when a link is followed](https://unpoly.com/learn/closing-overlays.md#on-follow).

## On a form {#on-a-form}

To accept an overlay when a form is submitted, set an `[up-accept]` attribute on the `<form>` element. This will immediately accept the overlay upon submission, without making a network request:

```html
<form up-accept>
  ...
</form>
```

The form's field values will become the [acceptance value](https://unpoly.com/learn/closing-overlays.md#acceptance-values) of the closed overlay as an [`up.Params`](https://unpoly.com/api/up.Params.md) value.

See [Closing when a form is submitted](https://unpoly.com/learn/closing-overlays.md#on-submit).

---

## Modifying attributes {#attributes}

### Acceptance {#attributes-acceptance}

#### [up-accept] {#up-accept}

(optional)

On buttons and links, the overlay's [acceptance value](https://unpoly.com/learn/closing-overlays.md#acceptance-values) as a [relaxed JSON](https://unpoly.com/api/relaxed-json.md) string.

If the attribute value is omitted, a value `null` will be used.

#### [up-confirm] {#up-confirm}

(optional)

A message the user needs to confirm before the layer is closed.

See [Confirmation dialogs: Confirming before closing an overlay](https://unpoly.com/learn/confirmation-dialogs.md#overlays).

### Animation {#attributes-animation}

#### [up-animation='fade-out'] {#up-animation}

(optional)

The [name](https://unpoly.com/learn/animations.md#available-animations) of the closing animation.

#### [up-duration=175] {#up-duration}

(optional)

The duration of the closing animation in milliseconds.

#### [up-easing='ease'] {#up-easing}

(optional)

The [timing function](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) that controls the closing animation's acceleration.