Documentação
Alert
Exibe um destaque para chamar a atenção do usuário.
Carregando…
"use client";
import {
Alert,
AlertDescription,
AlertTitle,
} from "@blips/ui/components/alert";
import { Terminal } from "@phosphor-icons/react";
export default function AlertDemo() {
return (
<Alert>
<Terminal className="h-4 w-4" />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components to your app using the cli.
</AlertDescription>
</Alert>
);
}
Instalação
Uso
import {
Alert,
AlertAction,
AlertDescription,
AlertTitle,
} from "@blips/ui/components/alert"<Alert>
<InfoIcon />
<AlertTitle>Atenção!</AlertTitle>
<AlertDescription>
Você pode adicionar componentes e dependências ao seu app usando a cli.
</AlertDescription>
<AlertAction>
<Button variant="outline">Ativar</Button>
</AlertAction>
</Alert>Exemplos
Destrutivo
Use variant="destructive" para criar um alerta destrutivo.
Carregando…
import {
Alert,
AlertDescription,
AlertTitle,
} from "@blips/ui/components/alert";
import { WarningCircle } from "@phosphor-icons/react";
export default function AlertDestructive() {
return (
<Alert variant="destructive">
<WarningCircle />
<AlertTitle>Error</AlertTitle>
<AlertDescription>
Your session has expired. Please log in again.
</AlertDescription>
</Alert>
);
}
Referência da API
Alert
O componente Alert exibe um destaque para chamar a atenção do usuário.
AlertTitle
O componente AlertTitle exibe o título do alerta.
AlertDescription
O componente AlertDescription exibe a descrição ou o conteúdo do alerta.
AlertAction
O componente AlertAction exibe um elemento de ação (como um botão) posicionado de forma absoluta no canto superior direito do alerta.