Badges

Este es un elemento de interfaz de usuario informativo, no cambia al pasar el ratón por encima ni al hacer clic, por lo que el usuario no puede interactuar con él.

PrimaryPrimary Badge
SuccessSuccess Badge
DangerDanger Badge
WarningWarning Badge
PurplePurple Badge
DefaultDefault Badge

Utilización

import { Badge } from "firefly-components/badges";

<Badge type="primary" content="Primary Badge" />
<Badge type="success" content="Success Badge" />
<Badge type="danger" content="Danger Badge" />
<Badge type="warning" content="Warning Badge" />
<Badge type="purple" content="Purple Badge" />
<Badge content="Default Badge" />

Props

typeRepresenta el tipo de badge a mostrar. Los valores disponibles son:
  • success
  • danger
  • warning
  • primary
  • purple
  • default
contentEs el contenido del badge. Puede recibir strings u otros componentes de React. También puedes poner contenido dentro del badge con la prop children.
allowBorderPermite mostrar una linea de borde en el badge. Recibe un valor booleano. Si no se especifica, por defecto tiene un valor false.
paddingPermite cambiar el padding del badge. Recibe un String. Esta prop se comporta igual que la propiedad padding de CSS. Si no se especifica, tiene un valor por defecto de 3px 10px.
fontSizePermite cambiar el tamaño de la fuente del badge. Recibe un String. Esta prop se comporta igual que la propiedad font-size de CSS. Si no se especifica, tiene un valor por defecto de 13px.

Ejemplos

Usando allowBorder={true} 

<Badge type="primary" content="Primary Badge" allowBorder={true} />
Primary Badge

Agregando contenido al badge a través de children

<Badge type="success">
    Success badge with children prop
</Badge>
Success badge with children prop

Cuando se usa children para agregar contenido al badge, la propiedad content se deshabilita, por lo que cualquier contenido pasado por esta ultima prop no se mostrará.

En esta pagina: