---
title: Badge
description: Etichette inline per stato, categorie e metadati: 11 varianti di colore, 4 dimensioni, icone, forme arrotondate o a pillola e contorni.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Usa il componente `<Badge>` per contrassegnare contenuti con indicatori di stato, etichette di categoria o marcatori di versione. I badge vengono visualizzati come elementi inline compatti, quindi puoi inserirli nel testo o disporli in un layout.

## Badge di base

Un badge semplice con lo stile predefinito:

<Badge>Predefinito</Badge>

```mdx
<Badge>Default</Badge>
```

## Colori

I badge sono disponibili in 11 varianti di colore per comunicare significati diversi:

<div className="flex flex-wrap gap-2 my-4">
  <Badge color="gray">Grigio</Badge>
  <Badge color="blue">Blu</Badge>
  <Badge color="green">Verde</Badge>
  <Badge color="yellow">Giallo</Badge>
  <Badge color="orange">Arancione</Badge>
  <Badge color="red">Rosso</Badge>
  <Badge color="purple">Viola</Badge>
</div>

```mdx
<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>
```

### Colori della superficie

Per badge che si adattano allo sfondo della pagina:

<div className="flex flex-wrap gap-2 my-4">
  <Badge color="white">Bianco</Badge>
  <Badge color="surface">Superficie</Badge>
</div>

```mdx
<Badge color="white">White</Badge>
<Badge color="surface">Surface</Badge>
```

### Colori distruttivi

Per stati di avviso o errore:

<div className="flex flex-wrap gap-2 my-4">
  <Badge color="white-destructive">Bianco distruttivo</Badge>
  <Badge color="surface-destructive">Superficie distruttiva</Badge>
</div>

```mdx
<Badge color="white-destructive">White Destructive</Badge>
<Badge color="surface-destructive">Surface Destructive</Badge>
```

## Con icone

Aggiungi icone per rendere i badge più descrittivi:

<div className="flex flex-wrap gap-2 my-4">
  <Badge icon="circle-check" color="green">Verificato</Badge>
  <Badge icon="star" color="yellow">In evidenza</Badge>
  <Badge icon="bolt" color="purple">Nuovo</Badge>
  <Badge icon="clock" color="blue">In attesa</Badge>
</div>

```mdx
<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>
```

### Tipi di icona

Specifica uno stile diverso per l'icona usando `iconType`:

<div className="flex flex-wrap gap-2 my-4">
  <Badge icon="star" iconType="solid" color="yellow">Pieno</Badge>
  <Badge icon="star" iconType="regular" color="yellow">Normale</Badge>
  <Badge icon="star" iconType="duotone" color="yellow">Duotone</Badge>
  <Badge icon="github" iconType="brands" color="gray">GitHub</Badge>
</div>

```mdx
<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>
```

## Dimensioni

Sono disponibili quattro dimensioni per adattarsi a contesti diversi:

<div className="flex flex-wrap items-center gap-2 my-4">
  <Badge size="xs" color="blue">Extra piccolo</Badge>
  <Badge size="sm" color="blue">Piccolo</Badge>
  <Badge size="md" color="blue">Medio</Badge>
  <Badge size="lg" color="blue">Grande</Badge>
</div>

```mdx
<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>
```

## Forme

Scegli tra angoli arrotondati e forma a pillola:

<div className="flex flex-wrap gap-2 my-4">
  <Badge shape="rounded" color="purple">Arrotondato</Badge>
  <Badge shape="pill" color="purple">Pillola</Badge>
</div>

```mdx
<Badge shape="rounded" color="purple">Rounded</Badge>
<Badge shape="pill" color="purple">Pill</Badge>
```

## Variante con contorno

Usa badge con contorno per un aspetto visivo più leggero:

<div className="flex flex-wrap gap-2 my-4">
  <Badge stroke color="blue">Blu con contorno</Badge>
  <Badge stroke color="green">Verde con contorno</Badge>
  <Badge stroke color="red">Rosso con contorno</Badge>
  <Badge stroke color="purple">Viola con contorno</Badge>
</div>

```mdx
<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>
```

## Stato disabilitato

Riduci l'opacità per i badge inattivi:

<div className="flex flex-wrap gap-2 my-4">
  <Badge disabled color="gray">Inattivo</Badge>
  <Badge disabled color="blue">Disabilitato</Badge>
</div>

```mdx
<Badge disabled color="gray">Inactive</Badge>
<Badge disabled color="blue">Disabled</Badge>
```

## Utilizzo inline

I badge funzionano inline con il testo. Questa funzionalità richiede un abbonamento <Badge color="orange" size="sm">Premium</Badge>. Puoi anche contrassegnare gli elementi come <Badge color="green" size="sm">Nuovi</Badge> o <Badge color="red" size="sm">Obsoleti</Badge>.

```mdx
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>.
```

## Proprietà

<ParamField name="color" type="string" default="gray">
  Variante di colore: `gray`, `blue`, `green`, `yellow`, `orange`, `red`, `purple`, `white`, `surface`, `white-destructive`, `surface-destructive`.
</ParamField>

<ParamField name="size" type="string" default="md">
  Dimensione del badge: `xs`, `sm`, `md`, `lg`.
</ParamField>

<ParamField name="shape" type="string" default="rounded">
  Forma del badge: `rounded`, `pill`.
</ParamField>

<ParamField name="icon" type="string">
  Nome dell'icona Font Awesome.
</ParamField>

<ParamField name="iconType" type="string">
  Stile dell'icona: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ParamField>

<ParamField name="stroke" type="boolean" default="false">
  Visualizza un badge con contorno e sfondo trasparente.
</ParamField>

<ParamField name="disabled" type="boolean" default="false">
  Riduce l'opacità per indicare lo stato inattivo.
</ParamField>

<ParamField name="className" type="string">
  Classi CSS aggiuntive per la personalizzazione dello stile.
</ParamField>

## E dopo?

<Columns cols={2}>
  <Card title="Panoramica dei componenti" icon="puzzle-piece" href="/it/components/overview">
    Esplora tutti i componenti disponibili
  </Card>
  <Card title="Nozioni di base su MDX" icon="file-code" href="/it/content/mdx-basics">
    Scopri come usare i componenti in MDX
  </Card>
</Columns>