Components / Display

Alert

A static notice surface with composable title, description, action, and icon regions.

Preview

default

This is the default alert variant.

info

This is the info alert variant.

success

This is the success alert variant.

warning

This is the warning alert variant.

destructive

This is the destructive alert variant.

Install

Run in your project

npx @getweini/cli@latest add alert

Use cases

Form outcome

Confirm that a save finished or explain what prevented submission.

Persistent notice

Keep an important policy or deadline visible with a relevant action.

Usage example

Vue

<script setup lang="ts">
import Alert from './components/ui/alert/Alert.vue'
import AlertAction from './components/ui/alert/AlertAction.vue'
import AlertDescription from './components/ui/alert/AlertDescription.vue'
import AlertTitle from './components/ui/alert/AlertTitle.vue'
import Button from './components/ui/button/Button.vue'
</script>

<template>
  <Alert variant="warning">
    <AlertTitle>Payment method expiring</AlertTitle>
    <AlertDescription>Update the card before the next invoice.</AlertDescription>
    <AlertAction><Button variant="outline">Update card</Button></AlertAction>
  </Alert>
</template>

More examples

Saved confirmation

A polite status works for an update inserted after an action.

Saved confirmation

<script setup lang="ts">
import Alert from './components/ui/alert/Alert.vue'
import AlertDescription from './components/ui/alert/AlertDescription.vue'
import AlertTitle from './components/ui/alert/AlertTitle.vue'
</script>

<template>
  <Alert role="status" variant="success">
    <AlertTitle>Changes saved</AlertTitle><AlertDescription>Your preferences are ready on every device.</AlertDescription>
  </Alert>
</template>

Static deadline

A notice already present at page load does not need a live-region role.

Static deadline

<script setup lang="ts">
import Alert from './components/ui/alert/Alert.vue'
import AlertAction from './components/ui/alert/AlertAction.vue'
import AlertDescription from './components/ui/alert/AlertDescription.vue'
import AlertTitle from './components/ui/alert/AlertTitle.vue'
import Link from './components/ui/link/Link.vue'
</script>

<template>
  <Alert variant="warning">
    <AlertTitle>Review your billing address</AlertTitle>
    <AlertDescription>The next invoice is due on 30 September.</AlertDescription>
    <AlertAction><Link href="/billing">Open billing</Link></AlertAction>
  </Alert>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for Alert
Name	Type	Default or requirement
`variant`	default \| info \| success \| warning \| destructive	default
`role`	alert \| status	none
`icon`	decorative slot	empty
`AlertTitle as`	h2 \| h3 \| h4 \| h5 \| h6	h3

No live-region role is added by default. Use alert only for urgent content inserted dynamically, status for polite updates, and neither for ordinary static page content.

Implementation notes

Use status for routine changes and alert only for urgent dynamically inserted messages.
Give the action a specific label that describes where it goes or what it does.

Accessibility and localization

An alert role on static initial content may interrupt screen-reader navigation unnecessarily.