Badge

Exibe um badge ou um componente com aparência de badge.

Exemplos

Regular

Primary e Secondary

Os quatro estilos do Figma: primary e secondary cheios, e primary-soft e secondary-soft com o tom suave por cima do surface-card, então o fundo continua opaco em qualquer superfície. secondary é igual ao regular.

Dot

Com layout="dot" o badge vira só um ponto na cor cheia do variant (nos soft, a cor cheia correspondente), com 4, 8, 12 ou 16px conforme o size. Como no native, os tipos não aceitam texto (children), icon, animation nem asChild com layout="dot". Como o ponto não tem texto, passe role="img" e aria-label quando ele carregar informação.

Freemium

Error

Warning

Neutral

Tamanhos

Animação

API

Propriedade	Tipo	Padrão	Descrição
variant	"regular" | "primary" | "primary-soft" | "secondary" | "secondary-soft" | "error" | "warning" | "freemium" | "neutral"	"regular"	Estilo visual do badge. secondary é igual ao regular.
layout	"tag" | "dot"	"tag"	dot mostra só um ponto na cor cheia do variant; nesse layout os tipos não aceitam children, icon, animation nem asChild.
size	"sm" | "md" | "lg" | "xl"	"md"	Controla a altura, o padding e o tamanho da fonte. No dot, o diâmetro: 4, 8, 12 ou 16px.
icon	React.ReactNode	-	Ícone opcional à esquerda (ex.: de @medway-ui/icons).
animation	"shine"	-	Adiciona um efeito de brilho animado que passa da esquerda para a direita.
asChild	boolean	false	Renderiza o badge como elemento filho usando Slot.
className	string	-	Classes CSS personalizadas.
...props	React.ComponentProps<"span">	-	Aceita todas as props nativas de span.