Pixelated Button

A highly customizable, complex 3D pixel-art button featuring floating particles, CRT scanlines, and programmatic hue shifts.

Installation

npx raya-ui@latest add pixelated-button

File Structure

your-project

components

pixelated-button

PixelatedButton.vue

API Reference

Props

hue

number

350

Base hue color (0-360) used to dynamically calculate the complex 3D shading palette.

label

string

"START"

The large, primary text displayed in the center of the button.

subLabel

string

"GAME"

The smaller subtitle text displayed beneath the main label.

scale

number

1

A multiplier to easily scale the entire button structure, including fonts and particle sizes.

showParticles

boolean

true

Toggles the rendering of the animated floating background particles.

Slots

#icon-left

Replaces the default 3D star icon on the left side of the button.

#icon-right

Replaces the default 3D star icon on the right side of the button.

Inspired by 'wolf_3808'.

Settings

Main Label

Sub Label

Color Hue350

Button Scale1.0x

Show Particles

source-code.vue

<script setup lang="ts">
import { PixelatedButton } from '@/components/ui/pixelated-button'
import { Crown } from 'lucide-vue-next'
</script>

<template>
  <PixelatedButton>
    <template #icon-left>
      <Crown class="w-6 h-6 text-yellow-300" />
    </template>
  </PixelatedButton>
</template>