Alert

An alert states something the reader needs to know about the page they are on. It stays where it is written — for a message that arrives and leaves on its own, use Toast.

import { Alert } from "ropav";

Update available

A new version is ready to install.

status

 defaultaccentsuccesswarningdanger

<Alert>
  <AlertContent>
    <AlertTitle>Update available</AlertTitle>
    <AlertDescription>A new version is ready to install.</AlertDescription>
  </AlertContent>
</Alert>

Statuses

The status carries the meaning, and AlertIndicator reads it from context rather than being told twice — so the icon cannot end up describing a different status than the colour does.

Update ready

Dark mode and a reworked focus ring.

Payment received

Your invoice has been paid.

Nearly full

Two seats remain on this plan.

Sync failed

The last sync did not complete.

alert-statuses.vue

<script setup lang="ts">
import { Alert, AlertContent, AlertDescription, AlertIndicator, AlertTitle } from "ropav";

const statuses = [
  { description: "Dark mode and a reworked focus ring.", status: "accent", title: "Update ready" },
  { description: "Your invoice has been paid.", status: "success", title: "Payment received" },
  { description: "Two seats remain on this plan.", status: "warning", title: "Nearly full" },
  { description: "The last sync did not complete.", status: "danger", title: "Sync failed" },
] as const;
</script>

<template>
  <div class="stack">
    <Alert v-for="entry in statuses" :key="entry.status" :status="entry.status">
      <AlertIndicator />
      <AlertContent>
        <AlertTitle>{{ entry.title }}</AlertTitle>
        <AlertDescription>{{ entry.description }}</AlertDescription>
      </AlertContent>
    </Alert>
  </div>
</template>

<style scoped>
.stack {
  display: flex;
  width: 100%;
  max-width: var(--rp-container-xl);
  flex-direction: column;
  gap: calc(var(--rp-spacing) * 3);
}
</style>

With an action

Anything after AlertContent sits beside it rather than under it. A button here is the usual case: the alert says what happened and offers the one thing to do about it.

A new version is available

Refresh to pick up the latest fixes.

alert-action.vue

<script setup lang="ts">
import { Alert, AlertContent, AlertDescription, AlertIndicator, AlertTitle, Button } from "ropav";
</script>

<template>
  <Alert class="alert" status="accent">
    <AlertIndicator />
    <AlertContent>
      <AlertTitle>A new version is available</AlertTitle>
      <AlertDescription>Refresh to pick up the latest fixes.</AlertDescription>
    </AlertContent>
    <Button size="sm">Refresh</Button>
  </Alert>
</template>

<style scoped>
.alert {
  width: 100%;
  max-width: var(--rp-container-xl);
}
</style>

Accessibility

• An alert is a surface in its own right, so text inside it uses its own on-surface colours rather than inheriting the ones tuned for whatever the alert is sitting on. Contrast holds wherever you put it.
• Success, warning and danger each get a glyph of their own, so those three read without colour. default and accent share the informational glyph and differ only in hue — when the distinction between them matters, say it in the title rather than leaving it to the colour.
• Nothing about an alert is announced on its own. If the message appears in response to something the reader did, put it where focus already is, or give the container a live region.

API

Alert

Prop	Type	Default	Description
status	"default" | "accent" | "success" | "warning" | "danger"	"default"	Alert status.

Slots: default.

AlertContent

Slots: default.

AlertDescription

Slots: default.

AlertIndicator

Slots: default.

AlertTitle

Slots: default.