Componentes de feedback
Componentes que mostram o que está acontecendo: toasts, alertas em linha, barras e círculos de progresso, spinners, skeletons e estados vazios.
Os spinners esperam antes de aparecer e depois ficam o bastante para serem lidos, então trabalho rápido nunca pisca, e cada mudança é anunciada aos leitores de tela.
- AlertMensagens inline para status e feedback, com uma superfície neutra, um ícone colorido e um botão de dispensar que recolhe suavemente.
- EmptyUm espaço reservado para telas que ainda não têm nada a mostrar, com ícone, mensagem e a próxima ação.
- ProgressUma barra ou anel que mostra o quanto uma tarefa avançou, suaviza entre as atualizações e desliza enquanto o total é desconhecido.
- SkeletonPlaceholders que esperam 150ms antes de aparecer, assumem o tamanho exato do conteúdo que envolvem e o fazem surgir com fade sem mover nada.
- SpinnerUm indicador de carregamento com tracinhos no estilo Apple ou um anel que "respira", que pode esperar antes de aparecer e permanecer o suficiente para não piscar.
- ToastMensagens breves que se empilham com ordem, expandem no hover, saem com deslize e transformam um estado de carregamento em sucesso ou erro no próprio lugar.
Usados nos blocos Pro
Blocos para produtos de IA construídos com estes componentes.
- MarkdownRenderização de Markdown para respostas de IA. Cobre streaming sem sintaxe pela metade, tabelas que você pode copiar e citações inline.
- BillingA página de plano e uso de um produto de IA. Cobre créditos que acabam no meio do ciclo, mudanças de plano com rateio e erros de cartão.
- Diff ReviewUma revisão das edições de arquivos de um agente antes de serem aplicadas. Cobre aceitar ou rejeitar cada mudança, comentários de volta ao agente e edições ainda em streaming.
- API keysA página de chaves de API de um produto de IA. Cobre um segredo mostrado só uma vez, revogar com desfazer e rotação com período de carência.
- SecurityA seção Segurança das configurações de um produto de IA. Cobre sessões, dois fatores com códigos de recuperação e exclusão atrás de uma confirmação digitada.
- SettingsA página de configurações de um produto de IA. Cobre uma barra de salvar que aparece só quando algo mudou, erros de campo e estados de carregamento.