Alarm Component
Notification badge with pulsing double-wave animation. Supports dot, text, images, and icons.
Notes
- Always wrap text or other content inside a child
<span> (e.g. <span class="alarm"><span>1</span></span>) — this ensures the glow overlay does not obscure the content.
alarm-md is equivalent to the default alarm wave behavior.- Empty
<span class="alarm"> renders as a notification dot.
Base
Dot (empty)
Text badge
1
99+
New
Multi-line
Alert!
3h left
Image
Sizes (pulse range)
alarm-sm (wave-1 / wave-2)
sm
P
✓
alarm-md (wave-2 / wave-4, default)
md
P
✓
alarm-lg (wave-3 / wave-5)
lg
P
✓
alarm-xl (wave-3 / wave-6)
xl
P
✓
Theme colors
Default (error, no color class)
!
Primary
P
Secondary
S
Tertiary
T
Success
✓
Error
✕
Info
i
Warning
!
Caution
⚠
Highlight
★
Ink
N
Title
T
Description
D
Caption
C
Placeholder
—
Black
B
White (on dark bg)
W
Custom colors
Multiple color formats are supported:
- 1. Theme semantic colors, e.g.
*-error, *-error-hover
- 2. Tailwind built-in colors, e.g.
*-indigo-500
- 3. Raw color values, e.g.
*-[#ff0000]
- 4. CSS named colors, e.g.
*-[red], *-[green]
Tailwind palettes & raw values
red-100
green-500
red-800
#12ffab
indigo-500
Color + size combination
Primary
sm
md
lg
xl
Success
sm
md
lg
xl
Highlight
sm
md
lg
xl
Info
sm
md
lg
xl