Saltar al contenido principal

Documentation Index

Fetch the complete documentation index at: https://mintlify-admin-mcp-admin-mcp-docs-b9cfd78.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

Usa insignias para mostrar indicadores de estado, label o metadata. Coloca las insignias en línea dentro del texto o como elementos independientes.

​
Insignia básica

Insignia 
<Badge>Insignia</Badge>

​
Colores

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>

​
Tamaños

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>

​
Formas

Elige entre esquinas redondeadas o insignias tipo píldora. Insignia Insignia 
<Insignia shape="rounded">Insignia</Insignia>
<Insignia shape="pill">Insignia</Insignia>

​
Iconos

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>

​
Variante de contorno

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>

​
Estado deshabilitado

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>

​
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. 
Esta función requiere una suscripción <Badge color="orange" size="sm">Premium</Badge>.

​
Propiedades combinadas

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>

​
Propiedades

​
color
string
predeterminado:"gray"
Variante de color de la insignia.Opciones: gray, blue, green, yellow, orange, red, purple, white, surface, white-destructive, surface-destructive.
​
size
string
predeterminado:"md"
Tamaño de la insignia.Opciones: xs, sm, md, lg.
​
shape
string
predeterminado:"rounded"
Forma de la insignia.Opciones: rounded, pill.
​
icon
string
El ícono que se mostrará.Opciones:
  • Nombre del ícono de Font Awesome, si tienes la propiedad icons.library configurada como fontawesome en tu docs.json
  • Nombre del ícono de Lucide, si tienes la propiedad icons.library configurada como lucide en tu docs.json
  • Nombre del ícono de Tabler, si tienes la propiedad icons.library configurada como tabler en tu docs.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:
  1. Convierte tu SVG con el convertidor de 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 de JSX.
  4. Envuelve el código SVG compatible con JSX entre llaves: icon={<svg ...> ... </svg>}.
  5. Ajusta height y width según sea necesario.
​
iconType
string
El estilo de ícono de Font Awesome. Solo se usa con íconos de Font Awesome.Opciones: regular, solid, light, thin, sharp-solid, duotone, brands.
​
stroke
boolean
predeterminado:"false"
Mostrar la insignia con un contorno en lugar de un fondo sólido.
​
disabled
boolean
predeterminado:"false"
Mostrar la insignia en estado inhabilitado con opacidad reducida.
​
className
string
Clases CSS adicionales para aplicar a la insignia.