0:00/0:00

Appearance

Recorded on iPhone. The button inside Telegram, ChatGPT, Grok, WhatsApp and Slack, then close up on the send, Speak and hang-up buttons as the metal drifts.

Shader

Liquid Metal Button

A pressable button whose face is moving liquid metal, with drifting chrome reflections.

$12

Or get it with Pro

Features

A button that looks poured from moving chrome
Three styles: a metal ring, a metal rim around glass, or glass over metal
Four ready-made looks: bright chrome, gunmetal, ember and stripes
Holds an icon, a label, or both, as a circle or a pill
Runs on iOS and Android, with real Liquid Glass on iOS 26 and a blur elsewhere
The ring's centre turns white or black to match light or dark mode
Holds still when Reduce Motion is on

Built with

Skia runtime shader
Reanimated
expo-glass-effect
expo-blur

Installation

1Install dependencies

npx expo install @shopify/react-native-skia react-native-reanimated react-native-worklets expo-glass-effect expo-blur

2Run a development build (Expo Go can't load Skia)

npx expo run:ios   # or: npx expo run:android

Usage

import { Ionicons } from '@expo/vector-icons';
import { LiquidMetalButton } from '@/components/liquid-metal-button';

export function SendButton({ onSend }: { onSend: () => void }) {
  return (
    <LiquidMetalButton onPress={onSend} accessibilityLabel="Send">
      <Ionicons name="send" size={18} />
    </LiquidMetalButton>
  );
}

How it works

A Skia shader draws the metal: bands of reflection travel across a rounded surface, bend with noise and split into warm and cool fringes, while the distance to the button's outline shades the rolled edge. Everything except the clock is worked out once per layout, so each frame only moves time forward. The shader is ported from Paper Design's liquid metal shader.

More once you own it

Examples, the full list of props and every advanced option for Liquid Metal Button are here for owners.

Next componentLiquid Metal Shape