// 01_CORE_UI
5 STYLES Button
Botón mecánico Neo-Brutalista con 5 variantes y síntesis de clic Web Audio API.
// VISTA PREVIA
> BUTTON 5 STYLES
// FRAMEWORK:
src/pages/button-ejemplo.astro 01 ---
02 import Button from '@/components/Button.astro';
03 ---
04
05 <Button variant="crimson" size="md">Carmesi Scorch</Button>
06 <Button variant="cyan" size="md">Cian Electrico</Button>
07 <Button variant="gold" size="md">Oro Dragon</Button>
08 <Button variant="dark" size="md">Modo Hacker</Button>
09 <Button variant="outline" size="md">Contorno Paper</Button>
01 import React from 'react';
02
03 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
04 variant?: 'crimson' | 'cyan' | 'gold' | 'dark' | 'outline';
05 size?: 'sm' | 'md' | 'lg';
06 }
07
08 export const Button: React.FC<ButtonProps> = ({
09 children,
10 variant = 'crimson',
11 size = 'md',
12 className = '',
13 ...props
14 }) => {
15 const variants = {
16 crimson: 'bg-[#D62436] text-white hover:bg-black',
17 cyan: 'bg-[#4DA3FF] text-black hover:bg-white',
18 gold: 'bg-[#F4D35E] text-black hover:bg-white',
19 dark: 'bg-[#0B0F17] text-white hover:bg-[#D62436]',
20 outline: 'bg-transparent text-current hover:bg-[#D62436] hover:text-white',
21 };
22 const sizes = {
23 sm: 'px-2.5 py-1 text-xs',
24 md: 'px-4 py-2 text-xs',
25 lg: 'px-6 py-2.5 text-sm',
26 };
27
28 return (
29 <button
30 className={`border-2 border-black font-mono font-extrabold shadow-[-4px_4px_0px_0px_#000000] active:-translate-x-0.5 active:translate-y-0.5 transition-transform duration-75 cursor-pointer ${variants[variant]} ${sizes[size]} ${className}`}
31 {...props}
32 >
33 {children}
34 </button>
35 );
36 };
37
38 // Ejemplo de uso:
39 export default function App() {
40 return (
41 <div className="flex flex-wrap gap-3 p-4">
42 <Button variant="crimson" size="md">Carmesi Scorch</Button>
43 <Button variant="cyan" size="md">Cian Electrico</Button>
44 <Button variant="gold" size="md">Oro Dragon</Button>
45 <Button variant="dark" size="md">Modo Hacker</Button>
46 </div>
47 );
48 }
01 <!-- Ryukami Neo-Brutalist Buttons (HTML + Tailwind CSS v4) -->
02 <div class="flex flex-wrap gap-3">
03 <!-- Variante Carmesi Scorch -->
04 <button class="border-2 border-black bg-[#D62436] text-white font-mono font-extrabold text-xs px-4 py-2 shadow-[-4px_4px_0px_0px_#000000] active:-translate-x-0.5 active:translate-y-0.5 transition-transform duration-75 cursor-pointer">
05 Carmesi Scorch
06 </button>
07
08 <!-- Variante Cian Electrico -->
09 <button class="border-2 border-black bg-[#4DA3FF] text-black font-mono font-extrabold text-xs px-4 py-2 shadow-[-4px_4px_0px_0px_#000000] active:-translate-x-0.5 active:translate-y-0.5 transition-transform duration-75 cursor-pointer">
10 Cian Electrico
11 </button>
12
13 <!-- Variante Oro Dragon -->
14 <button class="border-2 border-black bg-[#F4D35E] text-black font-mono font-extrabold text-xs px-4 py-2 shadow-[-4px_4px_0px_0px_#000000] active:-translate-x-0.5 active:translate-y-0.5 transition-transform duration-75 cursor-pointer">
15 Oro Dragon
16 </button>
17
18 <!-- Variante Hacker Dark -->
19 <button class="border-2 border-black bg-[#0B0F17] text-white font-mono font-extrabold text-xs px-4 py-2 shadow-[-4px_4px_0px_0px_#000000] active:-translate-x-0.5 active:translate-y-0.5 transition-transform duration-75 cursor-pointer">
20 Modo Hacker
21 </button>
22 </div>
| Prop | Tipo TypeScript | Default | Descripción | Variantes |
|---|---|---|---|---|
| variant | 'crimson' | 'cyan' | 'gold' | 'dark' | 'outline' | 'crimson' | Estilo cromático del botón según la paleta Scorch Neo-Brutalista. | crimson cyan gold dark outline |
| size | 'sm' | 'md' | 'lg' | 'md' | Tamaño físico y padding del botón. | sm md lg |
| href | string | undefined | Si se define, renderiza una etiqueta <a> con estilo de botón. | — |
| type | 'button' | 'submit' | 'reset' | 'button' | Tipo de botón HTML nativo. | button submit reset |
| disabled | boolean | false | Deshabilita la interacción, sonido táctil y atenúa la opacidad. | — |
| class | string | '' | Clases Tailwind adicionales añadidas al contenedor. | — |
// INSTALACIÓN
Terminal // Bash BASH
ryukami-ui add button
// CÓDIGO DE USO
src/pages/button-demo.astro ASTRO
01 ---
02 import Button from '@/components/Button.astro';
03 ---
04
05 <Button variant="crimson" size="md">Carmesi Scorch</Button>
06 <Button variant="cyan" size="md">Cian Electrico</Button>
07 <Button variant="gold" size="md">Oro Dragon</Button>
08 <Button variant="dark" size="md">Modo Hacker</Button>
09 <Button variant="outline" size="md">Contorno Paper</Button>
src/components/Button.tsx TSX // REACT
01 import React from 'react';
02
03 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
04 variant?: 'crimson' | 'cyan' | 'gold' | 'dark' | 'outline';
05 size?: 'sm' | 'md' | 'lg';
06 }
07
08 export const Button: React.FC<ButtonProps> = ({
09 children,
10 variant = 'crimson',
11 size = 'md',
12 className = '',
13 ...props
14 }) => {
15 const variants = {
16 crimson: 'bg-[#D62436] text-white hover:bg-black',
17 cyan: 'bg-[#4DA3FF] text-black hover:bg-white',
18 gold: 'bg-[#F4D35E] text-black hover:bg-white',
19 dark: 'bg-[#0B0F17] text-white hover:bg-[#D62436]',
20 outline: 'bg-transparent text-current hover:bg-[#D62436] hover:text-white',
21 };
22 const sizes = {
23 sm: 'px-2.5 py-1 text-xs',
24 md: 'px-4 py-2 text-xs',
25 lg: 'px-6 py-2.5 text-sm',
26 };
27
28 return (
29 <button
30 className={`border-2 border-black font-mono font-extrabold shadow-[-4px_4px_0px_0px_#000000] active:-translate-x-0.5 active:translate-y-0.5 transition-transform duration-75 cursor-pointer ${variants[variant]} ${sizes[size]} ${className}`}
31 {...props}
32 >
33 {children}
34 </button>
35 );
36 };
37
38 // Ejemplo de uso:
39 export default function App() {
40 return (
41 <div className="flex flex-wrap gap-3 p-4">
42 <Button variant="crimson" size="md">Carmesi Scorch</Button>
43 <Button variant="cyan" size="md">Cian Electrico</Button>
44 <Button variant="gold" size="md">Oro Dragon</Button>
45 <Button variant="dark" size="md">Modo Hacker</Button>
46 </div>
47 );
48 }
public/button-snippet.html HTML // TAILWIND
01 <!-- Ryukami Neo-Brutalist Buttons (HTML + Tailwind CSS v4) -->
02 <div class="flex flex-wrap gap-3">
03 <!-- Variante Carmesi Scorch -->
04 <button class="border-2 border-black bg-[#D62436] text-white font-mono font-extrabold text-xs px-4 py-2 shadow-[-4px_4px_0px_0px_#000000] active:-translate-x-0.5 active:translate-y-0.5 transition-transform duration-75 cursor-pointer">
05 Carmesi Scorch
06 </button>
07
08 <!-- Variante Cian Electrico -->
09 <button class="border-2 border-black bg-[#4DA3FF] text-black font-mono font-extrabold text-xs px-4 py-2 shadow-[-4px_4px_0px_0px_#000000] active:-translate-x-0.5 active:translate-y-0.5 transition-transform duration-75 cursor-pointer">
10 Cian Electrico
11 </button>
12
13 <!-- Variante Oro Dragon -->
14 <button class="border-2 border-black bg-[#F4D35E] text-black font-mono font-extrabold text-xs px-4 py-2 shadow-[-4px_4px_0px_0px_#000000] active:-translate-x-0.5 active:translate-y-0.5 transition-transform duration-75 cursor-pointer">
15 Oro Dragon
16 </button>
17
18 <!-- Variante Hacker Dark -->
19 <button class="border-2 border-black bg-[#0B0F17] text-white font-mono font-extrabold text-xs px-4 py-2 shadow-[-4px_4px_0px_0px_#000000] active:-translate-x-0.5 active:translate-y-0.5 transition-transform duration-75 cursor-pointer">
20 Modo Hacker
21 </button>
22 </div>