Hover and press them
Foil Button
The primary button is a window onto one image of foil. Hovering slides the window across it, so it catches the light.
Usage
import { Button } from '@wdzyi/ui';
<Button variant='foil'>Send a message</Button>
<Button variant='lighter' size={32} square aria-label='Next'>
→
</Button>Part of @wdzyi/ui. See setup to install it, or copy the code above.
Props
- variant'foil' | 'filled' | 'lighter' = 'lighter'
- Foil is for the one thing you most want pressed.
- size40 | 36 | 32 | 28 = 40
- Its height. The padding and the gap follow.
- squareboolean = false
- For a lone icon.
Notes
- It takes everything a button does. For a link in the same style, use buttonClass(variant, size) on your own element.
- The slide is slow, 800ms, so it reads as light moving rather than a state changing.
- Every look scales to 97% when pressed.