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

# [up-flashes]

Use an `[up-flashes]` element to show confirmations, alerts or warnings.

<figure>
<img src="https://unpoly.com/images/api/flashes.png" alt="Screenshot of three flash messages">
<figcaption>

Three flash messages stacked on top of each other: a confirmation ("User created successfully!"), an error ("Could not save your changes!") and a warning ("Your credit card is expiring in 3 days."). Each kind has its own color, so the user can tell them apart at a glance.

</figcaption>
</figure>

Your application layout should have an empty `[up-flashes]` element to indicate where flash messages should be inserted:

```html
<nav>
  Navigation items ...
</nav>
<div up-flashes></div>
<main>
  Main page content ...
</main>
```

To render a flash message, include an `[up-flashes]` element in your response. The element's content should be the messages you want to render:

```html
<div up-flashes>
  <strong>User was updated!</strong>
</div>

<main>
  Main response content ...
</main>
```

See [notification flashes](https://unpoly.com/learn/flashes.md) for more details and examples.

<nav aria-label="Guides">

- [Learn: Notification flashes](https://unpoly.com/learn/flashes.md)

</nav>

---

## Modifying attributes {#attributes}

### Animation {#attributes-animation}

#### [up-transition] {#up-transition}

(optional)

The name of a [transition](https://unpoly.com/api/up.motion.md) to morph between the old and new notification flashes.

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

(optional)

The duration of the transition in milliseconds.

#### [up-easing] {#up-easing}

(optional)

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