A call-to-action with a looping light sweep, breathing glow or orbiting beam.
Pro<ShimmerButton />5 variantsiOS · Android · Expo Go
9:41
Installation
One command copies the source into your app — you own the code and can change anything.
Usage
Colours, radius and light / dark come from
useKit(). Wrap your app in <KitProvider accent="#6366f1" radius={14}> to re-skin every component at once.Props
| Prop | Type | Default |
|---|---|---|
| variant Light sweep, breathing halo or orbiting border beam. | "shimmer" | "glow" | "border-beam" | "shimmer" |
| size 40 / 50 / 58pt tall. | "sm" | "md" | "lg" | "md" |
| color Button colour (beam colour for border-beam). | string | primary / accent |
| textColor Label colour. | string | readable on color |
| speed Loop length in ms. | number | 2600 / 2400 / 3200 |
| pill Fully rounded ends. | boolean | true |
| block Stretches to the parent's width (alignSelf: stretch). | boolean | false |
| left / right Icons beside the label. | ReactNode | — |
| textStyle Style for the label text. | StyleProp<TextStyle> | — |
| style Style for the outer animated wrapper (margins, alignment). | StyleProp<ViewStyle> | — |
| …PressableProps onPress, disabled, … |
Behaviour & accessibility
- Motion
- 'shimmer' sweeps a light band across on a loop, 'glow' breathes a soft halo and 'border-beam' sends a bright comet around the border. speed sets the loop length.
- Touch
- Pressing scales the button down on a bouncy spring.
- Reduced motion
- With Reduce Motion on, or while disabled, the loop stops and the button rests in a still state.
- Screen readers
- A button with its disabled state. Other Pressable props, such as accessibilityLabel, pass through.
Source
Did you like the content?