--- title: Distintivo description: Use etiquetas inline para status, categorias e metadados, com 11 variações de cor, 4 tamanhos, ícones, formatos pílula/arredondado e contornos. --- > **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version. Use o componente `` para marcar conteúdo com indicadores de status, rótulos de categoria ou marcadores de versão. Os badges são renderizados como elementos inline compactos, podendo ser inseridos em textos corridos ou organizados em um layout. ## Distintivo básico Um badge simples com o estilo padrão: Padrão ```mdx Default ``` ## Cores Os badges têm 11 variações de cor para transmitir diferentes significados:
Cinza Azul Verde Amarelo Laranja Vermelho Roxo
```mdx Gray Blue Green Yellow Orange Red Purple ``` ### Cores de superfície Para badges que se adaptam ao plano de fundo da página:
Branco Superfície
```mdx White Surface ``` ### Cores destrutivas Para estados de aviso ou erro:
Branco destrutivo Superfície destrutiva
```mdx White Destructive Surface Destructive ``` ## Com ícones Adicione ícones para tornar os badges mais descritivos:
Verificado Em destaque Novo Pendente
```mdx Verified Featured New Pending ``` ### Tipos de ícone Especifique um estilo de ícone diferente usando `iconType`:
Sólido Regular Duotone GitHub
```mdx Solid Regular Duotone GitHub ``` ## Tamanhos Quatro tamanhos estão disponíveis para diferentes contextos:
Extra pequeno Pequeno Médio Grande
```mdx Extra Small Small Medium Large ``` ## Formatos Escolha entre cantos arredondados ou formato de pílula:
Arredondado Pílula
```mdx Rounded Pill ``` ## Variante com contorno Use badges contornados para obter um peso visual mais leve:
Azul contornado Verde contornado Vermelho contornado Roxo contornado
```mdx Outlined Blue Outlined Green Outlined Red Outlined Purple ``` ## Estado desativado Reduza a opacidade para badges inativos:
Inativo Desativado
```mdx Inactive Disabled ``` ## Uso inline Os badges funcionam inline com o texto. Este recurso requer uma assinatura Premium. Você também pode marcar itens como Novo ou Obsoleto. ```mdx This feature requires a Premium subscription. You can also mark items as New or Deprecated. ``` ## Propriedades Variante de cor: `gray`, `blue`, `green`, `yellow`, `orange`, `red`, `purple`, `white`, `surface`, `white-destructive`, `surface-destructive`. Tamanho do badge: `xs`, `sm`, `md`, `lg`. Formato do badge: `rounded`, `pill`. Nome do ícone do Font Awesome. Estilo do ícone: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`. Exibe um badge contornado com fundo transparente. Reduz a opacidade para indicar um estado inativo. Classes CSS adicionais para personalização do estilo. ## Próximos passos Consulte todos os componentes disponíveis Aprenda a usar componentes no MDX