Status

The Status component is used to clearly communicate system states and outcomes, such as success, information, warnings, or alerts.

Use Status when…

Showing passive state
Communicating outcomes or progress
Information is contextual
No interuption is needed

Don’t use Status when…

Immediate attention is required
User action is blocked
Screen reader announcement is needed
Message is critical or urgent

Usage

import { VStatus } from '@vonage/vivid-api-vue';

<script setup lang="ts">
import { VStatus } from '@vonage/vivid-api-vue';
</script>

<template>
  <VStatus connotation="information" status="Information">Check the terms and conditions carefully</VStatus>
</template>

import { registerStatus } from '@vonage/vivid-api';

registerStatus('your-prefix');

<script type="module">
  import { registerStatus } from '@vonage/vivid-api';
  registerStatus('your-prefix');
</script>

<your-prefix-status status="Information" connotation="information">Check the terms and conditions carefully</your-prefix-status>

Connotation

The connotation attribute determines the icon and color. Use success, information, warning, or alert.

<script setup lang="ts">
import { VStatus } from '@vonage/vivid-api-vue';
</script>

<template>
  <div class="status-group">
    <VStatus connotation="success" status="Success">Transaction complete</VStatus>
    <VStatus connotation="information" status="Informatoin">Additional details are available</VStatus>
    <VStatus connotation="warning" status="Warning">Action may be required</VStatus>
    <VStatus connotation="alert" status="Alert">An error has occurred</VStatus>
  </div>
</template>

<style scoped>
.status-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
</style>

<div class="status-group">
  <vwc-status connotation="success" status="Success">Transaction complete</vwc-status>
  <vwc-status connotation="information" status="Info">Additional details are available</vwc-status>
  <vwc-status connotation="warning" status="Warning">Action may be required</vwc-status>
  <vwc-status connotation="alert" status="Alert">An error has occurred</vwc-status>
</div>

<style>
  .status-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
</style>

Use the Status component to show a short message with a clear type: positive (success), info, warning, or alert. Use the status attribute for the status label and the default slot for a brief description.

Status

The status attribute defines the short, visible label displayed next to the status icon (for example: Completed, New, Draft, Error).

Use concise, meaningful text that clearly communicates the current state of an item, and pair it with an appropriate connotation to reinforce the message visually.

The optional content placed inside the component (see Default slot below) provides additional context or explanation and should remain brief and scannable.

<script setup lang="ts">
import { VStatus } from '@vonage/vivid-api-vue';
</script>

<template>
  <div class="status-group">
    <VStatus connotation="success" status="Complete">Request submitted</VStatus>
    <VStatus connotation="information" status="New">Check your inbox</VStatus>
    <VStatus connotation="warning" status="Draft">Review before continuing</VStatus>
    <VStatus connotation="alert" status="Error">Something went wrong</VStatus>
  </div>
</template>

<style scoped>
.status-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
</style>

<div class="status-group">
  <vwc-status connotation="success" status="Complete">Request submitted</vwc-status>
  <vwc-status connotation="information" status="New">Check your inbox</vwc-status>
  <vwc-status connotation="warning" status="Draft">Review before continuing</vwc-status>
  <vwc-status connotation="alert" status="Error">Something went wrong</vwc-status>
</div>

<style>
  .status-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
</style>

Slots

Default slot

Use the default slot to provide additional context or explanation. Content should remain brief and scannable.

Icon slot

Use the icon slot or icon attribute to provide a custom icon instead of the default for the connotation.

<script setup lang="ts">
import { VIcon, VStatus } from '@vonage/vivid-api-vue';
</script>

<template>
  <VStatus connotation="success" status="Complete">
    <template #icon><VIcon name="check-double-solid" /></template>
    Request submitted
  </VStatus>
</template>