Skip to main content
Usa insignias para mostrar indicadores de estado, label o metadata. Las insignias se pueden usar en línea dentro del texto o como elementos independientes.

​
Insignia básica

Insignia

​
Colores

Los badges admiten distintas variantes de color para transmitir significados diferentes. Badge Badge Badge Badge Badge Badge Badge Badge Badge Badge Badge

​
Tamaños

Las insignias están disponibles en cuatro tamaños para adaptarse a la jerarquía de tu contenido. Insignia Insignia Insignia Insignia

​
Formas

Elige entre esquinas redondeadas o insignias tipo píldora. Insignia Insignia

​
Iconos

Añade iconos a las insignias para aportar más contexto. Insignia Insignia Insignia

​
Variante de contorno

Usa la variante de contorno para un aspecto más sutil. Badge Badge Badge Badge

​
Estado deshabilitado

Desactiva los badges para indicar estados inactivos o no disponibles. Badge Badge

​
Uso en línea

Las insignias se integran de forma natural en el contenido de texto. Por ejemplo, esta función requiere una suscripción Premium, o este endpoint de la API devuelve el formato JSON.

​
Propiedades combinadas

Combina varias propiedades para crear estilos personalizados de insignias. Premium Verificado Beta

​
Propiedades

​
string
predeterminado:"gray"
Variante de color de la insignia.Opciones: gray, blue, green, yellow, orange, red, purple, white, surface, white-destructive, surface-destructive.
​
string
predeterminado:"md"
Tamaño de la insignia.Opciones: xs, sm, md, lg.
​
string
predeterminado:"rounded"
Forma de la insignia.Opciones: rounded, pill.
​
string
El icono que se mostrará.Opciones:
  • Nombre del icono de Font Awesome
  • Nombre del icono de Lucide
  • Código SVG (compatible con JSX) envuelto entre llaves
  • URL a un icono alojado externamente
  • Ruta a un archivo de icono en tu proyecto
Para iconos SVG personalizados:
  1. Convierte tu SVG usando el convertidor SVGR.
  2. Pega tu código SVG en el campo de entrada de SVG.
  3. Copia el elemento completo <svg>...</svg> del campo de salida JSX.
  4. Envuelve el código SVG compatible con JSX entre llaves: icon={<svg ...> ... </svg>}.
  5. Ajusta height y width según sea necesario.
​
string
El estilo de icono de Font Awesome. Solo se usa con iconos de Font Awesome.Opciones: regular, solid, light, thin, sharp-solid, duotone, brands.
​
boolean
predeterminado:"false"
Mostrar la insignia con un contorno en lugar de un fondo sólido.
​
boolean
predeterminado:"false"
Mostrar la insignia en estado inhabilitado con opacidad reducida.
​
string
Clases CSS adicionales para aplicar a la insignia.