---
title: Badge
description: Etiqueta en línea para estado, versión o categorías destacadas.
url: https://docs.thally.io/es/components/badge
---

# Badge

Etiqueta en línea para estado, versión o categorías destacadas.

Usa `<Badge>` para resaltar estados, versiones o categorías de forma inline dentro de texto o encabezados.

## Variantes

Default{" "}
Success{" "}
Warning{" "}
Danger{" "}
Info

```mdx
<Badge variant="default">Default</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="danger">Danger</Badge>
<Badge variant="info">Info</Badge>
```

## Patrones comunes

Coloca badges junto al encabezado de una página para mostrar el estado de una funcionalidad:

{/* An accessible demo heading avoids adding an example to the page TOC. */}
<div role="heading" aria-level={2} className="mb-[1.125rem] mt-9 font-heading text-2xl font-semibold tracking-[-0.025em]">
  Webhooks Beta
</div>

```mdx
<div role="heading" aria-level={2} className="mb-[1.125rem] mt-9 font-heading text-2xl font-semibold tracking-[-0.025em]">
  Webhooks <Badge variant="warning">Beta</Badge>
</div>
```

## Props

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `variant` | `"default" \| "success" \| "warning" \| "danger" \| "info"` | `"default"` | Esquema de color |