Status badge

A readable 26pt status plate with words and a sunk LED or retained morphing meaning glyph. Quiet, opaque strong tint, explicit transparent/frosted surfaces and a solid override. State gestures have reduced-motion alternatives.

Library

Metal UI

Framework

React + SwiftUI

Type

ui

License

MIT

Dependencies

@base-ui/react@^1.8.0

Files

• packages/metalui/src/components/status/status.tsx
• packages/metalui/src/components/led/led.tsx
• packages/metalui/src/icons/MorphIcon.tsx
• packages/metalui/src/icons/morph.ts
• packages/metalui/src/icons/morph.generated.ts
• packages/metalui/src/motion/awake.ts
• packages/metalui/src/motion/duration.ts
• packages/metalui/src/motion/haptic.ts

Source

https://github.com/vijayksingh/metalui

Categories

• Badge Components
• React Badge Components
• Tailwind CSS Badge Components
• Feedback Components
• React Feedback Components
• Tailwind CSS Feedback Components

More from Metal UI

• Label
• Accordion
• Alert dialog
• Attachment
• Avatar
• AI composer
• Availability picker
• Settings
• Share panel
• Block silhouette
• Studio week
• Task inbox