Blife UI

InactivoPreparandoPrimary

Solid

PrimaryGreenOrangeYellowBlueRedPurpleNeutralPink

Outlined

PrimaryGreenOrangeYellowBlueRedPurpleNeutralPink

Light

PrimaryGreenOrangeYellowBlueRedPurpleNeutralPink

Tamaños

XsmallSmallMediumLarge

Con Indicador de Verificación

Puedes mostrar un indicador de verificación (checkmark) en el badge usando la propiedad checked.

VerificadoAprobado

Con Botón de Cerrar/Cancelar

El componente DismissibleButton permite agregar un botón para cerrar o eliminar el badge. Este botón hereda automáticamente el color y la variante del badge padre.

VitaminasProteínasMinerales

Bordes Redondeados Completos

Puedes hacer que el badge tenga bordes completamente redondeados usando la propiedad fullRounded.

RedondeadoCompletoCircular

Props

Badge

Prop	Tipo	Requerido	Descripción
`variant`	`solid \| light \| outlined \| outline`	-	La variante visual del badge
`color`	`primary \| green \| orange \| yellow \| blue \| red \| purple \| pink \| neutral \| "gray-light" \| "gray-dark"`	-	El color semántico del badge
`size`	`xsmall \| small \| medium \| large`	-	El tamaño del badge
`checked`	`boolean`	-	Muestra un indicador de verificación (checkmark) en el badge
`fullRounded`	`boolean`	-	Aplica bordes completamente redondeados al badge
`className`	`string`	-	Clases CSS adicionales para el contenedor
`children`	`ReactNode`	-	Contenido del badge
`...rest`	`ComponentProps<"span">`	-	Todas las props del elemento HTML span

DismissibleButton

Prop	Tipo	Requerido	Descripción
`className`	`string`	-	Clases CSS adicionales para el botón
`onClick`	`(event: MouseEvent) => void`	-	Función que se ejecuta cuando se hace clic en el botón
`...rest`	`ComponentProps<"button">`	-	Todas las props del elemento HTML button