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>

API reference

Props

Prop	Type	Default
`variant` The semantic color of the status dot.	`"critical" \| "positive" \| "neutral" \| "info" \| "attention"`	`"neutral"`
`size` The diameter of the dot.	`"m" \| "l" \| "s"`	`"m"`
`pulse` Adds a pulsating ring around the dot to signal an ongoing, live activity (e.g. something is currently active or processing). The animation is disabled for users who prefer reduced motion.	`false \| true`	`false`
`label` An accessible label describing the status. When omitted the dot is treated as decorative and hidden from assistive technology.	`string`	`undefined`

Best practices

Pair the dot with a nearby text label so the status is never conveyed by color alone.
Choose the variant that matches the semantic meaning of the status.
Set the label prop when the dot is the only thing communicating a status, so assistive technology can announce it.
Keep it for single, glanceable states.

Don't

Do not use Status Dot to convey text or counts; use Badge instead.
Do not make Status Dot interactive or the only target for a click.
Do not place many dots together, because they become hard to tell apart.
Do not rely on color alone to communicate meaning.

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.
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.

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

Edit this pageorReport an issue

Snackbar

Temporary overlay feedback shown near the bottom-right corner of the interface for non-critical, short-lived messages.

Switch

A direct on or off control for a single binary setting that takes effect immediately.