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
import { VStatus } from '@vonage/vivid-vue';
import { registerStatus } from '@vonage/vivid';
registerStatus('your-prefix');
The connotation attribute determines the icon and color. Use success, information, warning, or alert.
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.
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.
Use the default slot to provide additional context or explanation. Content should remain brief and scannable.
Use the icon slot or icon attribute to provide a custom icon instead of the default for the connotation.