Add reflective rings, text and badges to actions or labels. Try materials and pointer deformation before copying the code.
Choose an example to try, then make it your own below.
import { useCallback, useRef } from 'react'
import { BEND_DEFAULTS, MetalFx, useMetalBend } from '@/components/livenui/metal'
export function MetalAction() {
const ring = useRef<HTMLDivElement>(null)
const getBend = useCallback(() => ({ ...BEND_DEFAULTS, enabled: true }), [])
useMetalBend(ring, getBend)
return (
<MetalFx
preset={"chromatic"}
variant={"circle"}
strength={0.81}
innerShadow={true}
normalizeHostStyles={false}
paused={false}
theme={"light"}
ref={ring}
style={{"background":"transparent"}}
>
<button type="button" aria-label="Create" style={{"height":40,"width":40,"border":0,"borderRadius":999,"background":"var(--gradient-accent, linear-gradient(120deg, hsl(220 91% 54%), hsl(250 80% 54%)))","color":"white"}}>↗</button>
</MetalFx>
)
}