Status Dot

<script setup lang="ts">
import MtStatusDot from "@shopware-ag/meteor-component-library/MtStatusDot";
</script>

<template>
  <mt-status-dot variant="positive" label="Online" />
</template>

Usage

Status Dot is a small, non-interactive colored dot for signaling a single status at a glance, such as an item being active, needing attention, or in an error state. Use it next to a label in tabs, lists, or headers where a full Badge would be too heavy, and always pair it with nearby text so the meaning never depends on color alone.

import { MtStatusDot } from "@shopware-ag/meteor-component-library";

Examples

Variants

<script setup lang="ts">
import MtStatusDot from "@shopware-ag/meteor-component-library/MtStatusDot";
</script>

<template>
  <div style="display: flex; gap: 12px; align-items: center">
    <mt-status-dot variant="neutral" />
    <mt-status-dot variant="info" />
    <mt-status-dot variant="attention" />
    <mt-status-dot variant="critical" />
    <mt-status-dot variant="positive" />
  </div>
</template>

Sizes

<script setup lang="ts">
import MtStatusDot from "@shopware-ag/meteor-component-library/MtStatusDot";
</script>

<template>
  <div style="display: flex; gap: 12px; align-items: center">
    <mt-status-dot variant="positive" size="s" />
    <mt-status-dot variant="positive" size="m" />
    <mt-status-dot variant="positive" size="l" />
  </div>
</template>

Pulse

Set pulse to add a pulsating ring that signals ongoing, live activity, such as a process that is currently running.

<script setup lang="ts">
import MtStatusDot from "@shopware-ag/meteor-component-library/MtStatusDot";
</script>

<template>
  <mt-status-dot variant="positive" pulse label="Live" />
</template>

Disabled

Set disabled when the dot belongs to a disabled element. The dot switches to the disabled color of its variant, and pulse has no effect.

<script setup lang="ts">
import MtStatusDot from "@shopware-ag/meteor-component-library/MtStatusDot";
</script>

<template>
  <div style="display: flex; gap: 12px; align-items: center">
    <mt-status-dot variant="neutral" disabled />
    <mt-status-dot variant="info" disabled />
    <mt-status-dot variant="attention" disabled />
    <mt-status-dot variant="critical" disabled />
    <mt-status-dot variant="positive" disabled />
  </div>
</template>

API reference

Props

Best practices

Behavior

• Status Dot is presentational and non-interactive. If users need to click or trigger something, wrap it in an appropriate interactive component.
• It renders a single fixed shape and has no text or slot content; use Badge when a label is required.
• With pulse the dot shows a repeating ring to signal live activity. Reserve it for states that are genuinely ongoing, and avoid pulsating several dots at once.

Accessibility

• The dot is decorative by default and hidden from assistive technology, on the assumption that a visible text label carries the meaning.
• When the dot is the only carrier of a status, set the label prop. It then exposes an accessible name to assistive technology.
• disabled only changes the color and adds no ARIA state, because the dot is not interactive. If a labeled dot is disabled and that matters to users, say so in the label.
• Do not communicate status through color alone; keep an adjacent text label for all users.
• The pulse animation is automatically disabled for users who have enabled reduced motion, leaving the dot in its static state.

Related components

• Badge: when the status needs a text label, icon, or a larger visual treatment.