Badge
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 <Badge> 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<Badge>Default</Badge>Colores
Los badges vienen en 11 variantes de color para transmitir diferentes significados:
<Badge color="gray">Gray</Badge>
<Badge color="blue">Blue</Badge>
<Badge color="green">Green</Badge>
<Badge color="yellow">Yellow</Badge>
<Badge color="orange">Orange</Badge>
<Badge color="red">Red</Badge>
<Badge color="purple">Purple</Badge>Colores de superficie
Para badges que se adaptan al fondo de la página:
<Badge color="white">White</Badge>
<Badge color="surface">Surface</Badge>Colores destructivos
Para estados de advertencia o error:
<Badge color="white-destructive">White Destructive</Badge>
<Badge color="surface-destructive">Surface Destructive</Badge>Con iconos
Añade iconos para hacer los badges más descriptivos:
<Badge icon="circle-check" color="green">Verified</Badge>
<Badge icon="star" color="yellow">Featured</Badge>
<Badge icon="bolt" color="purple">New</Badge>
<Badge icon="clock" color="blue">Pending</Badge>Tipos de icono
Especifica un estilo de icono diferente usando iconType:
<Badge icon="star" iconType="solid" color="yellow">Solid</Badge>
<Badge icon="star" iconType="regular" color="yellow">Regular</Badge>
<Badge icon="star" iconType="duotone" color="yellow">Duotone</Badge>
<Badge icon="github" iconType="brands" color="gray">GitHub</Badge>Tamaños
Hay cuatro tamaños disponibles para adaptarse a diferentes contextos:
<Badge size="xs" color="blue">Extra Small</Badge>
<Badge size="sm" color="blue">Small</Badge>
<Badge size="md" color="blue">Medium</Badge>
<Badge size="lg" color="blue">Large</Badge>Formas
Elige entre esquinas redondeadas o forma píldora:
<Badge shape="rounded" color="purple">Rounded</Badge>
<Badge shape="pill" color="purple">Pill</Badge>Variante de trazo
Usa badges con contorno para un peso visual más ligero:
<Badge stroke color="blue">Outlined Blue</Badge>
<Badge stroke color="green">Outlined Green</Badge>
<Badge stroke color="red">Outlined Red</Badge>
<Badge stroke color="purple">Outlined Purple</Badge>Estado deshabilitado
Reduce la opacidad para badges inactivos:
<Badge disabled color="gray">Inactive</Badge>
<Badge disabled color="blue">Disabled</Badge>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.
This feature requires a <Badge color="orange" size="sm">Premium</Badge> subscription.
You can also mark items as <Badge color="green" size="sm">New</Badge> or
<Badge color="red" size="sm">Deprecated</Badge>.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.