HudStatus

Shows status changes with both text and color.

Basic usage

Live preview

ConnectedWaiting to connectConnection lostNot connected

View Vue source

Vue · TypeScript

<script setup lang="ts">
import { AgmHudStatus } from 'augma'
</script>

<template>
  <div class="example-row">
    <AgmHudStatus>Connected</AgmHudStatus>
    <AgmHudStatus tone="warning">Waiting to connect</AgmHudStatus>
    <AgmHudStatus tone="danger">Connection lost</AgmHudStatus>
    <AgmHudStatus tone="neutral">Not connected</AgmHudStatus>
  </div>
</template>

<style scoped>
.example-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.example-stack {
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: 360px;
}
</style>

API

Prop	Type	Default	Description
tone	'success' | 'warning' | 'danger' | 'neutral'	'success'	Status meaning

Slots

• default: status text

Keyboard and usage notes

Uses role=status to announce changes politely; always provide text instead of relying on color.

Installation

import { AgmHudStatus } from 'augma'
import 'augma/style.css'

Copy the editable source:

pnpm dlx [email protected] add https://augma.yyj.moe/r/hud-status.json