Liquid Glass buttons and toolbars that spring down under your finger.
Installation
One command copies the source into your app — you own the code and can change anything.
Usage
useKit(). Wrap your app in <KitProvider accent="#6366f1" radius={14}> to re-skin every component at once.Props
| Prop | Type | Default |
|---|---|---|
| label Button text. Leave it out (with an icon) for a circular icon button. | string | — |
| icon Icon before the label. `useGlassButtonInk({ variant, tint, scheme })` returns the colour to draw it in. | ReactNode | — |
| size Height 36 / 44 / 52; icon-only buttons are circles of that size. `GLASS_ICON_SIZE[size]` is the matching icon size. | 'sm' | 'md' | 'lg' | 'md' |
| variant Plain monochrome glass, or glass washed with `tint` — the label switches to black or white to stay readable. | 'glass' | 'tinted' | 'glass' |
| tint Wash colour for the tinted variant. | string | kit accent |
| scheme Force light or dark glass, e.g. 'dark' over photos. | 'light' | 'dark' | kit theme |
| onPress / disabled Press handler; disabled dims the button and blocks presses. | () => void / boolean | — / false |
| haptics Light impact on press. | boolean | true |
| accessibilityLabel Required for icon-only buttons. | string | label |
| style Outer style: margins, position, width or flex (buttons hug their content by default). | StyleProp<ViewStyle> | — |
| GlassToolbar items Icon buttons. `icon` is a node or `({ color, size, active }) => node`; `label` is the accessibility label; `active` draws a soft bubble in the accent colour. | { key, icon, label, onPress?, active?, disabled? }[] | — |
| GlassToolbar size Item size, 36 / 44 / 52. | 'sm' | 'md' | 'lg' | 'md' |
| GlassToolbar floating A cluster of separate glass circles (melting together on iOS 26) instead of one capsule. | boolean | false |
| GlassToolbar direction Lay items out horizontally or vertically (map-style controls). | 'row' | 'column' | 'row' |
| GlassToolbar separators / gap Hairlines between capsule items; space between floating circles. | boolean / number | true / 8 |
| GlassToolbar accent Colour of active items. | string | kit accent (glass ink) |
| GlassToolbar scheme / haptics / accessibilityLabel / style As on GlassButton; accessibilityLabel names the toolbar. | — | kit theme / true / — / — |
Behaviour & accessibility
- Motion
- Buttons spring down to 0.94 and toolbar icons to 0.86 while pressed, and an active toolbar item springs in a soft bubble. On iOS 26 a GlassButton lets the native glass bounce instead.
- Reduced motion
- Press springs are skipped and the active bubble appears without a spring.
- Haptics
- A light impact on every press, unless haptics is false.
- Screen readers
- Each button has the button role with its label and disabled state; toolbar items also report selected. The toolbar itself has the toolbar role.
- Platforms
- iOS 26 shows real interactive Liquid Glass, tinted natively, and floating toolbar circles melt together. Elsewhere it is blurred glass with a stronger colour wash for tinted buttons.
Source
Did you like the content?