Vox Mente
Navegação

Componentes

Draft Status

beta

Indica o estado de salvamento de um rascunho.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/draft-status

Playground

Rascunho salvo às 14h32por Ana Beatriz

<DraftStatus savedAt="às 14h32" author="Ana Beatriz" />

Uso

Confirma que um formulário longo está salvo. Discreto: é confirmação, não alerta.

Rascunho salvo

Estados

Só `error` chama atenção — é o único que exige ação de quem preenche o PEI ou o registro de aprendizagem.

Salvando…

Rascunho salvo

Não foi possível salvar — tente novamente

Com horário e autor

`savedAt` e `author` só aparecem no estado `saved` — o rascunho salvo é o único momento em que faz sentido dizer quem e quando.

Rascunho salvo às 14h32por Ana Beatriz

Mensagem customizada

`children` substitui o texto padrão do estado, mas o ícone e a cor continuam vindo de `state`.

Sessão expirada — faça login de novo para salvar

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

DraftStatus

PropTipoPadrão
authorstring | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null—
savedAtstring | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null—
state"saving" | "saved" | "error" | null"saved"

Também aceita as props de React, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css