Pixel button
A chunky pixel button that presses down into its shadow, with a pal on top.
<piix-button>DOM + canvasForm-ready<piix-button pal="bitbug">Get started</piix-button>
Tone
Size
Pal
Stepped pixel corners, an ink frame and a hard shadow it sinks into when pressed. Hover sends a puff of pixels off its corners. Give it a pal and a little character sits on its top edge, looks round when you hover, and hops when you click.
Installation
<!-- once, anywhere on the page: every component --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>
<!-- just pixel button (the shared engine loads itself, once) --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/button.min.js"></script>
npm install piixpal // once, in your entry file import "piixpal";
// npm install piixpal
import "piixpal";
export default function Page() {
return (
<piix-button pal="bitbug">Get started</piix-button>
);
}
Usage
<piix-button pal="bitbug">Get started</piix-button>
Examples
Tones
<piix-button>Lime</piix-button> <piix-button tone="coral">Coral</piix-button> <piix-button tone="violet">Violet</piix-button> <piix-button tone="sky">Sky</piix-button> <piix-button tone="ink">Ink</piix-button>
With a pal
<piix-button tone="coral" pal="frog">Deploy</piix-button> <piix-button tone="sky" pal="pip">Subscribe</piix-button>
Disabled
<piix-button disabled>Not yet</piix-button>
API reference
| Attribute | What it does | Default |
|---|---|---|
tone | lime coral violet sky sun mint ink paper | lime |
size | sm md lg | md |
pal | a pal to sit on top: bitbug, pip, frog, kitty… | – |
type | button submit reset | button |
disabled | greyed out | – |
Events
| Event | When |
|---|---|
click | like any button |
Accessibility
- A real, form-associated button.
- The pal is decoration and hidden from screen readers.