Primitivedata-display

Badge

Stable

Primitive compacto de status e rótulo. Renderiza um span por padrão e assume qualquer elemento através de `render`.

Instalação

npx up-web-ds add badge

Preview

Basic

Novo

Variants

PrimarySecondaryOutlineGhost

Statuses

RascunhoAprovadoErro

All states

Basic

Novo

Variants

PrimarySecondaryOutlineGhost

Statuses

RascunhoAprovadoErro

As Link

Ver no catálogo

Usage

@/components/ui/badge
import { Badge } from '@/components/ui/badge'
Badge
<Badge>Novo</Badge>

Props

Props de Badge
PropTypeDefaultDescription
variant"link" | "destructive" | "primary" | "outline" | "secondary" | "ghost" | null'primary'
renderReact.ReactElement<unknown, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>sem valor padrãoAllows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Estende useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>. Aceita também os atributos padrão de um elemento React (280 não listados).

Metadata

Notas de acessibilidade

Não interativo por padrão; comunica significado pelo texto, nunca só pela cor.

Classificação

Layer
Primitive
Domínio
Domain-free (compartilhado)
Categoria
data-display
Status
Stable

Origem e distribuição

Fonte
Internal (up-web-studio)
Distribuição
Interna

Acessibilidade

  • Teclado: revisado
  • Leitor de tela: revisado
  • Touch: revisado
  • Reduced motion: revisado

Dependências

Pacotes
@base-ui/react, class-variance-authority
Ícones
Nenhum
Construído sobre
Nenhum
Usado por
AnnouncementQuestion CardStatus