Recipedata-display

Announcement

Stable

Recipe do Badge oficial para anunciar uma novidade: uma pílula com etiqueta e título, normalmente acima do título de um hero e apontando para a página que explica a mudança. Preserva variantes, `render` e comportamento do primitive; a recipe acrescenta só forma — altura que acompanha o conteúdo, elevação de contorno e a etiqueta encaixada na borda, tingida com a própria tinta da variante, o que dispensou a flag `themed` da origem.

Instalação

npx up-web-ds add announcement

Preview

Basic

NovoPrévia de links no catálogo

Variants

OutlinePadrão da recipeSecondaryÊnfase discretaPrimaryLançamento principal

Without Tag

Registry privado com token por pessoa

Truncated

BetaAdapter de ícones para Lucide, Phosphor, Hugeicons e Tabler

All states

Basic

NovoPrévia de links no catálogo

As Link

NovoConheça o Glimpse

Variants

OutlinePadrão da recipeSecondaryÊnfase discretaPrimaryLançamento principal

Without Tag

Registry privado com token por pessoa

Truncated

BetaAdapter de ícones para Lucide, Phosphor, Hugeicons e Tabler

Usage

@/components/ui/announcement
import {
  Announcement,
  AnnouncementTag,
  AnnouncementTitle,
} from '@/components/ui/announcement'
Announcement
<Announcement>
  <AnnouncementTag>Novo</AnnouncementTag>
  <AnnouncementTitle>Prévia de links no catálogo</AnnouncementTitle>
</Announcement>

Props

Announcement

Props de Announcement
PropTypeDefaultDescription
variant"link" | "destructive" | "primary" | "outline" | "secondary" | "ghost" | null'outline'
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 React.ComponentProps<typeof Badge>. Aceita também os atributos padrão de um elemento React (280 não listados).

AnnouncementTag

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

AnnouncementTitle

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

Composition

A etiqueta vem antes do título, os dois dentro do Announcement. A etiqueta é opcional.

Composição de Announcement

Announcement

  • AnnouncementTag
  • AnnouncementTitle

Metadata

Notas de acessibilidade

Verificado em tests/e2e/announcement.spec.ts no Chromium desktop e mobile, em light e dark. Estática, a pílula é texto: não entra na sequência de tabulação. Como link (render do Badge), continua sendo um link real — Tab o alcança, Enter o segue e o foco visível do Badge permanece. Leitor de tela verificado por teste e pela árvore de acessibilidade do navegador: o nome do link vem do texto da etiqueta e do título, separados porque as duas partes são itens flex, e o chevron do exemplo fica fora da árvore; o significado nunca depende da cor da variante. Axe sem violações WCAG 2.2 AA nos exemplos, incluindo a etiqueta tingida sobre as variantes outline, secondary e primary. Toque verificado em viewport de 375px com emulação de toque: o link mede pelo menos 24x24 (a recipe troca a altura fixa de 20px do Badge por min-h-6) e o toque navega; num container estreito o título trunca em vez de empurrar a página para rolagem horizontal. Reduced motion verificado em navegador com prefers-reduced-motion: reduce — não há movimento na recipe; a transição de cor herdada do Badge no hover do link não é movimento e permanece. Não há ícones estruturais: o chevron do exemplo é composição do consumidor.

Classificação

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

Origem e distribuição

Fonte
Derived from kibo / announcement
Licença
MIT
URL
https://www.kibo-ui.com/r/announcement.json
Distribuição
Interna

Acessibilidade

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

Dependências

Pacotes
Nenhuma
Ícones
Nenhum
Construído sobre
Badge
Usado por
Nenhum ainda