Insignia
Usa el componente insignia para destacar indicadores de estado, etiquetas de versión o metadata en línea con colores y tooltips personalizables.
Usa insignias para mostrar indicadores de estado, label o metadata. Coloca las insignias en línea dentro del texto o como elementos independientes.
Insignia<Badge>Insignia</Badge>Los badges admiten distintas variantes de color para transmitir significados diferentes.
Badge Badge Badge Badge Badge Badge Badge Badge Badge Badge Badge<Badge color="gray">Badge</Badge>
<Badge color="blue">Badge</Badge>
<Badge color="green">Badge</Badge>
<Badge color="yellow">Badge</Badge>
<Badge color="orange">Badge</Badge>
<Badge color="red">Badge</Badge>
<Badge color="purple">Badge</Badge>
<Badge color="white">Badge</Badge>
<Badge color="surface">Badge</Badge>
<Badge color="white-destructive">Badge</Badge>
<Badge color="surface-destructive">Badge</Badge>Las insignias están disponibles en cuatro tamaños para adaptarse a la jerarquía de tu contenido.
Insignia Insignia Insignia Insignia<Insignia size="xs">Insignia</Insignia>
<Insignia size="sm">Insignia</Insignia>
<Insignia size="md">Insignia</Insignia>
<Insignia size="lg">Insignia</Insignia>Elige entre esquinas redondeadas o insignias tipo píldora.
Insignia Insignia<Insignia shape="rounded">Insignia</Insignia>
<Insignia shape="pill">Insignia</Insignia>Añade iconos a las insignias para aportar más contexto.
Insignia Insignia Insignia<Insignia icon="circle-check" color="green">Insignia</Insignia>
<Insignia icon="clock" color="orange">Insignia</Insignia>
<Insignia icon="ban" color="red">Insignia</Insignia>Usa la variante de contorno para un aspecto más sutil.
Badge Badge Badge Badge<Insignia stroke color="blue">Insignia</Insignia>
<Insignia stroke color="green">Insignia</Insignia>
<Insignia stroke color="orange">Insignia</Insignia>
<Insignia stroke color="red">Insignia</Insignia>Desactiva los badges para indicar estados inactivos o no disponibles.
Badge Badge<Insignia disabled icon="lock" color="gray">Insignia</Insignia>
<Insignia disabled icon="lock" color="blue">Insignia</Insignia>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.
Esta función requiere una suscripción <Badge color="orange" size="sm">Premium</Badge>.Combina varias propiedades para crear estilos personalizados de insignias.
Premium Verificado Beta<Badge icon="star" color="blue" size="lg" shape="pill">Premium</Badge>
<Badge icon="check" stroke color="green" size="sm">Verificado</Badge>
<Badge icon="badge-alert" color="orange" shape="rounded">Beta</Badge>colorstringdefault: grayVariante de color de la insignia.
Opciones: gray, blue, green, yellow, orange, red,
purple, white, surface, white-destructive, surface-destructive.
sizestringdefault: mdTamaño de la insignia.
Opciones: xs, sm, md, lg.
shapestringdefault: roundedForma de la insignia.
Opciones: rounded, pill.
iconstringEl ícono que se mostrará.
Opciones:
- Nombre del ícono de Font Awesome, si tienes la propiedad
icons.libraryconfigurada comofontawesomeen tudocs.json - Nombre del ícono de Lucide, si tienes la propiedad
icons.libraryconfigurada comolucideen tudocs.json - Nombre del ícono de Tabler, si tienes la propiedad
icons.libraryconfigurada comotableren tudocs.json - URL de un ícono alojado externamente
- Ruta a un archivo de ícono en tu proyecto
- Código SVG envuelto entre llaves
Para íconos SVG personalizados:
- Convierte tu SVG con el convertidor de SVGR.
- Pega tu código SVG en el campo de entrada de SVG.
- Copia el elemento completo
<svg>...</svg>del campo de salida de JSX. - Envuelve el código SVG compatible con JSX entre llaves:
icon={<svg ...> ... </svg>}. - Ajusta
heightywidthsegún sea necesario.
iconTypestringEl estilo de ícono de Font Awesome. Solo se usa con íconos de Font Awesome.
Opciones: regular, solid, light, thin, sharp-solid, duotone, brands.
strokebooleandefault: falseMostrar la insignia con un contorno en lugar de un fondo sólido.
disabledbooleandefault: falseMostrar la insignia en estado inhabilitado con opacidad reducida.
classNamestringClases CSS adicionales para aplicar a la insignia.