Game Button
Chunky game-style button: a bevelled face on a darker ledge, an inset rim lit from the top left, two specks of shine and an outlined label. Every proportion is a fraction of the height.
Default
The yellow face, measured off a reference render. The top band, ledge, rim, shine and outline are fractions of the height, so the button keeps its shape at any size.
Sizes
sm, default and lg are 40, 48 and 56px tall. For any other height set --game-button-h.
Colors
colorVariant carries the yellow's structure over to each Tailwind hue. Every stop keeps its place on that hue's shade scale relative to the face, which lands on 500 (400 for slate and zinc).
Secondary
color-variant="muted" is a quiet glass key with the same geometry and label, so a second action sits level with the first on light and dark pages.
API Reference
GameButton
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "default" | "lg" | "default" | Height 40, 48 or 56px. Padding, radius, bevel, shine and outline scale with it. |
colorVariant | "yellow" | "red" | "orange" | "amber" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | "slate" | "zinc" | "muted" | "yellow" | Palette. yellow is the reference and muted the quiet glass key. color overrides it. |
color | string | — | Face color, any CSS color. Every other stop is derived from it. |
to | string | — | Renders a NuxtLink. External URLs get target _blank and rel noopener. |
target | string | — | Link target. Overrides the external default. |
as | string | "button" | Element to render when to is empty. |
disabled | boolean | false | Disables the button, or marks the link aria-disabled. |
| Slot | Description |
|---|---|
default | The label, drawn above the rim and shine. |
Accessibility
Keyboard shortcuts and ARIA behavior.
- Renders a native button, or a link when to is set, so Enter and Space behave as usual.
- The rim and shine are aria-hidden with pointer-events none. Only the label is read and clicked.
- The white label stays legible on every hue through a dark outline traced round each letter.
- Rubik 800 is self-hosted, preloaded and set to font-display optional, so a late font never reflows the button.
- Keyboard focus shows a 2px ring 4px out. With prefers-reduced-motion: reduce the hover and press transitions are off.