// 01_CORE_UI
ASCII READY Badge
Etiquetas y pastillas TUI de estado con sombra dura de -2px 2px.
// VISTA PREVIA
> BADGE ASCII READY
● SYSTEM_ALERT ◆ RE_ENGINEERING [*] VELGRYND_CORE TS TYPESCRIPT 7 POSTGRESQL 17
// FRAMEWORK:
src/pages/badge-ejemplo.astro 01 ---
02 import Badge from '@/components/Badge.astro';
03 ---
04
05 <Badge variant="crimson">● SYSTEM_ALERT</Badge>
06 <Badge variant="cyan">◆ RE_ENGINEERING</Badge>
07 <Badge variant="gold">[*] VELGRYND_CORE</Badge>
08 <Badge variant="dark">TS TYPESCRIPT 7</Badge>
09 <Badge variant="outline">POSTGRESQL 17</Badge>
01 import React from 'react';
02
03 interface BadgeProps {
04 variant?: 'crimson' | 'cyan' | 'gold' | 'dark' | 'outline' | 'emerald';
05 children: React.ReactNode;
06 }
07
08 export const Badge: React.FC<BadgeProps> = ({ variant = 'crimson', children }) => {
09 const styles = {
10 crimson: 'bg-[#D62436] text-white border-black',
11 cyan: 'bg-[#4DA3FF] text-black border-black',
12 gold: 'bg-[#F4D35E] text-black border-black',
13 dark: 'bg-[#0B0F17] text-white border-black',
14 outline: 'bg-transparent text-current border-current',
15 emerald: 'bg-[#10B981] text-black border-black',
16 };
17
18 return (
19 <span
20 className={`inline-flex items-center gap-1.5 px-2 py-0.5 font-mono text-[10px] font-extrabold uppercase border shadow-[-2px_2px_0px_0px_#000000] ${styles[variant]}`}
21 >
22 {children}
23 </span>
24 );
25 };
26
27 // Ejemplo de uso:
28 export default function StatusPanel() {
29 return (
30 <div className="flex flex-wrap gap-2">
31 <Badge variant="crimson">● SYSTEM_ALERT</Badge>
32 <Badge variant="cyan">◆ RE_ENGINEERING</Badge>
33 <Badge variant="gold">[*] VELGRYND_CORE</Badge>
34 <Badge variant="emerald">[OK] PRODUCTION</Badge>
35 </div>
36 );
37 }
01 <!-- Ryukami TUI Badges (HTML + Tailwind CSS v4) -->
02 <div class="flex flex-wrap items-center gap-2">
03 <span class="inline-flex items-center gap-1.5 px-2 py-0.5 font-mono text-[10px] font-extrabold uppercase border border-black bg-[#D62436] text-white shadow-[-2px_2px_0px_0px_#000000]">
04 ● SYSTEM_ALERT
05 </span>
06 <span class="inline-flex items-center gap-1.5 px-2 py-0.5 font-mono text-[10px] font-extrabold uppercase border border-black bg-[#4DA3FF] text-black shadow-[-2px_2px_0px_0px_#000000]">
07 ◆ RE_ENGINEERING
08 </span>
09 <span class="inline-flex items-center gap-1.5 px-2 py-0.5 font-mono text-[10px] font-extrabold uppercase border border-black bg-[#F4D35E] text-black shadow-[-2px_2px_0px_0px_#000000]">
10 [*] VELGRYND_CORE
11 </span>
12 <span class="inline-flex items-center gap-1.5 px-2 py-0.5 font-mono text-[10px] font-extrabold uppercase border border-black bg-[#10B981] text-black shadow-[-2px_2px_0px_0px_#000000]">
13 [OK] PRODUCTION
14 </span>
15 </div>
| Prop | Tipo TypeScript | Default | Descripción | Variantes |
|---|---|---|---|---|
| variant | 'crimson' | 'cyan' | 'gold' | 'dark' | 'outline' | 'crimson' | Color de fondo y contraste de la etiqueta de estado. | crimson cyan gold dark outline |
| size | 'sm' | 'md' | 'sm' | Escala tipográfica y espaciado interior. | sm md |
| class | string | '' | Clases utilitarias adicionales de Tailwind. | — |
// INSTALACIÓN
Terminal // Bash BASH
ryukami-ui add badge
// CÓDIGO DE USO
src/pages/badge-demo.astro ASTRO
01 ---
02 import Badge from '@/components/Badge.astro';
03 ---
04
05 <Badge variant="crimson">● SYSTEM_ALERT</Badge>
06 <Badge variant="cyan">◆ RE_ENGINEERING</Badge>
07 <Badge variant="gold">[*] VELGRYND_CORE</Badge>
08 <Badge variant="dark">TS TYPESCRIPT 7</Badge>
09 <Badge variant="outline">POSTGRESQL 17</Badge>
src/components/Badge.tsx TSX // REACT
01 import React from 'react';
02
03 interface BadgeProps {
04 variant?: 'crimson' | 'cyan' | 'gold' | 'dark' | 'outline' | 'emerald';
05 children: React.ReactNode;
06 }
07
08 export const Badge: React.FC<BadgeProps> = ({ variant = 'crimson', children }) => {
09 const styles = {
10 crimson: 'bg-[#D62436] text-white border-black',
11 cyan: 'bg-[#4DA3FF] text-black border-black',
12 gold: 'bg-[#F4D35E] text-black border-black',
13 dark: 'bg-[#0B0F17] text-white border-black',
14 outline: 'bg-transparent text-current border-current',
15 emerald: 'bg-[#10B981] text-black border-black',
16 };
17
18 return (
19 <span
20 className={`inline-flex items-center gap-1.5 px-2 py-0.5 font-mono text-[10px] font-extrabold uppercase border shadow-[-2px_2px_0px_0px_#000000] ${styles[variant]}`}
21 >
22 {children}
23 </span>
24 );
25 };
26
27 // Ejemplo de uso:
28 export default function StatusPanel() {
29 return (
30 <div className="flex flex-wrap gap-2">
31 <Badge variant="crimson">● SYSTEM_ALERT</Badge>
32 <Badge variant="cyan">◆ RE_ENGINEERING</Badge>
33 <Badge variant="gold">[*] VELGRYND_CORE</Badge>
34 <Badge variant="emerald">[OK] PRODUCTION</Badge>
35 </div>
36 );
37 }
public/badge-snippet.html HTML // TAILWIND
01 <!-- Ryukami TUI Badges (HTML + Tailwind CSS v4) -->
02 <div class="flex flex-wrap items-center gap-2">
03 <span class="inline-flex items-center gap-1.5 px-2 py-0.5 font-mono text-[10px] font-extrabold uppercase border border-black bg-[#D62436] text-white shadow-[-2px_2px_0px_0px_#000000]">
04 ● SYSTEM_ALERT
05 </span>
06 <span class="inline-flex items-center gap-1.5 px-2 py-0.5 font-mono text-[10px] font-extrabold uppercase border border-black bg-[#4DA3FF] text-black shadow-[-2px_2px_0px_0px_#000000]">
07 ◆ RE_ENGINEERING
08 </span>
09 <span class="inline-flex items-center gap-1.5 px-2 py-0.5 font-mono text-[10px] font-extrabold uppercase border border-black bg-[#F4D35E] text-black shadow-[-2px_2px_0px_0px_#000000]">
10 [*] VELGRYND_CORE
11 </span>
12 <span class="inline-flex items-center gap-1.5 px-2 py-0.5 font-mono text-[10px] font-extrabold uppercase border border-black bg-[#10B981] text-black shadow-[-2px_2px_0px_0px_#000000]">
13 [OK] PRODUCTION
14 </span>
15 </div>