← DOCS
fantasy

PotionFlask

Bubbling potion flask button with liquid animation and particles.

npx chaos add potion-flask

PREVIEW

USAGE

case 'glass-button': return ; case 'neon-glow': return ; case 'floating-button': return ;
import { PotionFlask } from '@oalacea/chaosui/buttons/potion-flask';

<PotionFlask>Drink</PotionFlask>
<PotionFlask potionColor="mana">Restore Mana</PotionFlask>
<PotionFlask potionColor="strength" bubbles={12}>Buff</PotionFlask>

PROPS

PropTypeDefault
potionColorType of potion for color
"health" | "mana" | "poison" | "strength" | "invisibility""health"
bubblesNumber of bubbles or enable/disable
boolean | numbertrue
sizeSize of the flask
"sm" | "md" | "lg""md"

CSS VARIABLES

--potion-liquid#e53935Potion liquid color
--potion-glow#ff5252Potion glow color