Distintivo
Use etiquetas inline para status, categorias e metadados, com 11 variações de cor, 4 tamanhos, ícones, formatos pílula/arredondado e contornos.
Use o componente <Badge> 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<Badge>Default</Badge>Cores
Os badges têm 11 variações de cor para transmitir diferentes significados:
<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>Cores de superfície
Para badges que se adaptam ao plano de fundo da página:
<Badge color="white">White</Badge>
<Badge color="surface">Surface</Badge>Cores destrutivas
Para estados de aviso ou erro:
<Badge color="white-destructive">White Destructive</Badge>
<Badge color="surface-destructive">Surface Destructive</Badge>Com ícones
Adicione ícones para tornar os badges mais descritivos:
<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>Tipos de ícone
Especifique um estilo de ícone diferente usando iconType:
<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>Tamanhos
Quatro tamanhos estão disponíveis para diferentes contextos:
<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>Formatos
Escolha entre cantos arredondados ou formato de pílula:
<Badge shape="rounded" color="purple">Rounded</Badge>
<Badge shape="pill" color="purple">Pill</Badge>Variante com contorno
Use badges contornados para obter um peso visual mais leve:
<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>Estado desativado
Reduza a opacidade para badges inativos:
<Badge disabled color="gray">Inactive</Badge>
<Badge disabled color="blue">Disabled</Badge>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.
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>.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.