Alert

VAlert displays a message in the flow of the page, with an optional title, actions and close button. For temporary notifications, use toast().

Usage

vue

Scheduled maintenance

The service will be unavailable on Sunday from 2:00 to 4:00.

<script setup lang="ts">
import { VAlert } from 'vectis-ui'
</script>

<template>
  <VAlert title="Scheduled maintenance">
    The service will be unavailable on Sunday from 2:00 to 4:00.
  </VAlert>
</template>

Examples

Variants

variant selects soft, a tinted surface, or outline, the page surface inside a tinted border.

vue

A tinted surface, the default.

The page surface inside a tinted border.

<script setup lang="ts">
import { VAlert } from 'vectis-ui'
</script>

<template>
  <VAlert variant="soft">A tinted surface, the default.</VAlert>
  <VAlert variant="outline">The page surface inside a tinted border.</VAlert>
</template>

Tones

tone sets the semantic colour and the default icon.

vue

Drafts are kept for 30 days.

A new version is available.

Your changes are saved.

You have used 90% of your storage.

The payment failed. Check the card details.

<script setup lang="ts">
import { VAlert } from 'vectis-ui'
</script>

<template>
  <VAlert tone="neutral">Drafts are kept for 30 days.</VAlert>
  <VAlert tone="accent">A new version is available.</VAlert>
  <VAlert tone="success">Your changes are saved.</VAlert>
  <VAlert tone="warning">You have used 90% of your storage.</VAlert>
  <VAlert tone="danger">The payment failed. Check the card details.</VAlert>
</template>

Icon

icon replaces the tone’s icon. hideIcon removes it. The icon is decorative: the text must carry the meaning.

vue

Drag a file onto the page to upload it.

Drafts are kept for 30 days.

<script setup lang="ts">
import { VAlert } from 'vectis-ui'
import { cloud_upload as cloudUpload } from 'vectis-ui/icons'
</script>

<template>
  <VAlert tone="neutral" :icon="cloudUpload">Drag a file onto the page to upload it.</VAlert>
  <VAlert tone="neutral" hide-icon>Drafts are kept for 30 days.</VAlert>
</template>

Actions

The actions slot places buttons or links under the message.

vue

Payment failed

Check the card details and try again.

<script setup lang="ts">
import { VAlert, VButton } from 'vectis-ui'
</script>

<template>
  <VAlert tone="danger" title="Payment failed">
    Check the card details and try again.
    <template #actions>
      <VButton size="sm" tone="danger">Retry</VButton>
      <VButton size="sm" variant="ghost" tone="neutral">View details</VButton>
    </template>
  </VAlert>
</template>

Closable

closable adds a close button that sets open to false and emits close. Bind v-model:open to show the alert again.

vue

Scheduled maintenance

The service will be unavailable on Sunday from 2:00 to 4:00.

<script setup lang="ts">
import { ref } from 'vue'
import { VAlert, VButton } from 'vectis-ui'

const open = ref(true)
</script>

<template>
  <div class="demo">
    <VAlert v-model:open="open" class="alert" closable title="Scheduled maintenance">
      The service will be unavailable on Sunday from 2:00 to 4:00.
    </VAlert>
    <VButton v-if="!open" variant="outline" tone="neutral" @click="open = true">
      Show the alert again
    </VButton>
  </div>
</template>

<style scoped>
.demo {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vectis-space-3);
}

.alert {
  align-self: stretch;
}
</style>

Live

By default, the alert is read with the rest of the page. live announces it: role="status", or role="alert" for the danger tone. Use it for alerts that appear after an action.

vue

<script setup lang="ts">
import { ref } from 'vue'
import { VAlert, VButton } from 'vectis-ui'

const sent = ref(false)
</script>

<template>
  <div class="demo">
    <VButton @click="sent = true">Send the form</VButton>
    <VAlert v-if="sent" live class="alert" tone="success">The form was sent.</VAlert>
  </div>
</template>

<style scoped>
.demo {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vectis-space-3);
}

.alert {
  align-self: stretch;
}
</style>

API

Props

Prop	Type	Default
`variant`	`AlertVariant'soft' \| 'outline'`	`'soft'`
Visual style.
`tone`	`AlertTone'neutral' \| 'accent' \| 'danger' \| 'success' \| 'warning'`	`'accent'`
Colour tone. Also selects the default icon.
`title`	`string`	none
Text above the message. Replaced by the `title` slot.
`icon`	`IconSource`	none
Icon replacing the tone’s icon.
`hideIcon`	`boolean`	`false`
Hides the icon.
`closable`	`boolean`	`false`
Shows a close button.
`closeLabel`	`string`	none
Accessible close button name. Defaults to the dictionary.
`live`	`boolean`	`false`
Announces the alert with `role="status"`, or `role="alert"` for the `danger` tone.
`v-model:open`	`boolean`	`true`
Whether the alert is shown. The close button sets it to `false`.

Events

Event	Type
`close`	`[]`
The close button was activated. `open` is already `false`.

Slots

Slot	Type
`default`	`{}`
Message.
`title`	`{}`
Custom title content.
`actions`	`{}`
Buttons or links under the message.

Types

Types used in the API tables. Import exported types from vectis-ui.

export interface BuiltinIcon {
  name: string
  paths: readonly [string] | readonly [string, string]
}

export type IconRender =
  | { path: string; viewBox?: string }
  | { component: Component; props?: Record<string, unknown> }
  | { src: string }
  | { text: string; class?: string }
  | { class: string }

export type IconSource = string | BuiltinIcon | IconRender