Svelte 5 Status Tag – Dashboard Status Indicator

Display status information with color-coded Tags. Designed for logistics and inventory dashboards with in-stock, low-stock, and out-of-stock variants.

dashboard ui svelteSvelte 5 type safe propsaccessible svelte components aria

Preview

In Stock Low Stock Out of Stock

Use Case

Purpose-built for inventory and logistics systems, these status tags use carefully calibrated colors that meet WCAG AA contrast requirements while maintaining the industrial aesthetic.

Props API

Tag component props
PropTypeDefaultDescription
variant 'in-stock' | 'low-stock' | 'out-of-stock''in-stock'Status variant determining color
label string''Text content of the tag
class string—Additional CSS classes

Related Components

DataTablePanel

See it in Action

Explore the Tag in an interactive dashboard environment.

Customize in Showroom

More Data Display Components

DataTable

Designed for high-density data visualization in Logistics control panels, this Svelte 5 DataTable supports row selection, stock level meters, and status tags.

Ticker

Optimized for Fintech applications, this ticker handles 60+ updates per second using Svelte 5 Runes for fine-grained reactivity.

Meter

Inspired by Braun audio equipment, this LED meter provides instant visual feedback for system metrics.