MenuChevron Down
Alert Alerta - Docs - Artefact

Alert Alerta

Feedback
Apresentacional

Introdução

Exibe uma mensagem breve e importante de uma forma que atrai a atenção do usuário sem interromper suas tarefas.

Uso

import { Alert, AlertIcon } from "../components/ui";

export default function MyPage() {
  return (
    <Alert
      status="success"
      title="Success"
      description="Your changes have been saved."
      indicator={<AlertIcon />}
    />
  );
}

Construtor de Páginas CMS

Este componente está disponível como um bloco alert no Construtor de Páginas (content/pages/*.json):

{
  "type": "alert",
  "status": "success",
  "title": "Success",
  "description": "Your changes have been saved.",
  "variant": "subtle"
}

Propriedades

PropTypeDescription
titlestringO título do alerta.
descriptionstringA descrição do alerta.
indicatorChildUm ícone ou elemento a ser renderizado como indicador.
childrenChildConteúdo adicional a ser renderizado dentro do componente.
classstringClasses CSS personalizadas.

| status | `"info" \ | "success" \ | "warning" \ | "error" \ | "neutral"` | A paleta de cores de status do alerta. |

| variant | `"subtle" \ | "solid" \ | "outline"` | O estilo visual do alerta. | | aria-live | `"polite" \ | "assertive" \ | "off"` | A configuração aria-live do alerta. Por padrão "polite". |