Alert

Ação e status

Mensagem que fica na tela, dentro do conteúdo: o que aconteceu e o que fazer. Para aviso que passa, use o Toaster. Erro é anunciado na hora pelo leitor de tela.

Substitui no Brain:fp-msg escrito à mão (8 telas)

Tons

Liquidação concluída
O valor cai na conta em D+1.
Os dados são atualizados a cada hora.
O token expira em 2 dias.
Liquidação concluída
O valor cai na conta em D+1.
Os dados são atualizados a cada hora.
O token expira em 2 dias.
import { Alert } from "@paytime/ui";

export default function Example() {
  return (
    <div className="flex flex-col gap-3">
      <Alert tone="success" title="Liquidação concluída">
        O valor cai na conta em D+1.
      </Alert>
      <Alert tone="error">Não foi possível conectar. Tente de novo.</Alert>
      <Alert tone="info" leftBar>
        Os dados são atualizados a cada hora.
      </Alert>
      <Alert tone="warning" variant="solid">
        O token expira em 2 dias.
      </Alert>
    </div>
  );
}

Com botão de fechar

Novidade
Agora dá para salvar um filtro padrão em cada lista.
Novidade
Agora dá para salvar um filtro padrão em cada lista.
"use client";

import { Alert, Button } from "@paytime/ui";
import { useState } from "react";

export default function Example() {
  const [isVisible, setVisible] = useState(true);
  if (!isVisible) {
    return (
      <Button tone="neutral" variant="outline" size="sm" onClick={() => setVisible(true)}>
        Mostrar de novo
      </Button>
    );
  }
  return (
    <Alert tone="highlight" title="Novidade" onDismiss={() => setVisible(false)}>
      Agora dá para salvar um filtro padrão em cada lista.
    </Alert>
  );
}