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

# [up-dismiss]

[Dismisses](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.

The [relaxed JSON](https://unpoly.com/api/relaxed-json.md) value of the `[up-dismiss]` attribute becomes the overlay's [dismissal value](https://unpoly.com/learn/closing-overlays.md#dismissal-values).

<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 dismiss the [current layer](https://unpoly.com/api/up.layer.current.md) when a button is clicked, use an `[up-dismiss]` attribute:

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

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

```html
<button up-dismiss="{ 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-dismiss>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 dismissed.

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

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

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

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

The form's field values will become the [dismissal value](https://unpoly.com/learn/closing-overlays.md#dismissal-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}

### Dismissal {#attributes-dismissal}

#### [up-dismiss] {#up-dismiss}

(optional)

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

#### [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.