--- title: Badge description: Etiquetas en línea para estado, categorías y metadatos -- 11 variantes de color, 4 tamaños, iconos, formas píldora/redondeadas y contornos de trazo. --- Usa el componente `` para etiquetar contenido con indicadores de estado, etiquetas de categoría o marcadores de versión. Los badges se renderizan como elementos en línea compactos, por lo que puedes insertarlos en texto corriente o apilarlos en un diseño. ## Badge básico Un badge simple con estilo predeterminado: Default ```mdx Default ``` ## Colores Los badges vienen en 11 variantes de color para transmitir diferentes significados:
Gray Blue Green Yellow Orange Red Purple
```mdx Gray Blue Green Yellow Orange Red Purple ``` ### Colores de superficie Para badges que se adaptan al fondo de la página:
White Surface
```mdx White Surface ``` ### Colores destructivos Para estados de advertencia o error:
White Destructive Surface Destructive
```mdx White Destructive Surface Destructive ``` ## Con iconos Añade iconos para hacer los badges más descriptivos:
Verified Featured New Pending
```mdx Verified Featured New Pending ``` ### Tipos de icono Especifica un estilo de icono diferente usando `iconType`:
Solid Regular Duotone GitHub
```mdx Solid Regular Duotone GitHub ``` ## Tamaños Hay cuatro tamaños disponibles para adaptarse a diferentes contextos:
Extra Small Small Medium Large
```mdx Extra Small Small Medium Large ``` ## Formas Elige entre esquinas redondeadas o forma píldora:
Rounded Pill
```mdx Rounded Pill ``` ## Variante de trazo Usa badges con contorno para un peso visual más ligero:
Outlined Blue Outlined Green Outlined Red Outlined Purple
```mdx Outlined Blue Outlined Green Outlined Red Outlined Purple ``` ## Estado deshabilitado Reduce la opacidad para badges inactivos:
Inactive Disabled
```mdx Inactive Disabled ``` ## Uso en línea Los badges funcionan en línea con el texto. Esta función requiere una suscripción Premium. También puedes marcar elementos como New o Deprecated. ```mdx This feature requires a Premium subscription. You can also mark items as New or Deprecated. ``` ## Props Variante de color: `gray`, `blue`, `green`, `yellow`, `orange`, `red`, `purple`, `white`, `surface`, `white-destructive`, `surface-destructive`. Tamaño del badge: `xs`, `sm`, `md`, `lg`. Forma del badge: `rounded`, `pill`. Nombre del icono de Font Awesome. Estilo del icono: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`. Mostrar como badge con contorno y fondo transparente. Reducir la opacidad para indicar estado inactivo. Clases CSS adicionales para estilos personalizados. ## ¿Qué sigue? Explora todos los componentes disponibles Aprende a usar componentes en MDX