A tactile fire button with small animated flames, rising embers and a warm glow on hover or keyboard focus.
"use client";
import * as React from "react";
import { FireButton } from "@/components/ui/ember-fire-button";
export default function FireButtonDemo() {
const [label, setLabel] = React.useState("Ignite");
const [disabled, setDisabled] = React.useState(false);
return (
<div style={{ display: "grid", placeItems: "center", gap: 48, minHeight: 400,
width: "100%", padding: "80px 24px", boxSizing: "border-box" }}>
<FireButton disabled={disabled}>{label}</FireButton>
<div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", alignItems: "center", gap: 20, font: "14px system-ui", color: "inherit" }}>
<label style={{ display: "flex", alignItems: "center", gap: 8 }}>
Label
<input value={label} onChange={event => setLabel(event.target.value)}
style={{ width: 120, padding: "6px 10px", border: "1px solid #888", borderRadius: 6, background: "transparent", color: "inherit" }} />
</label>
<label style={{ display: "flex", alignItems: "center", gap: 8 }}>
<input type="checkbox" checked={disabled} onChange={event => setDisabled(event.target.checked)} />
Disabled
</label>
</div>
</div>
);
}