Feedback

Alert

A notice that stays on the page until it is dealt with: partial data, a connection that needs attention, rows that could not be read. A Toast leaves on its own and a ChromeMessage takes the page. The status is in an icon tile and the corner glow, never a colored edge, and each has its own shape. An error is announced at once; the rest waits its turn.

view .md

Preview

Syncing 2 accounts

New entries show up here as they arrive.

Connected

Your bank syncs every morning at 6.

Partial data

Two accounts have not synced today, so this total may be low.

sync now

The import stopped

Row 14 has no date. Fix it in the file and import again.

Installation

terminal

bash

npx @entrepta/cli@latest add alert

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

alert.tsx

tsx

import { Alert } from "@/components/entrepta/alert"

<Alert tone="warning" title="Partial data" action={<ArrowLink href="/sync">sync now</ArrowLink>}>
  Two accounts have not synced today.
</Alert>

<Alert tone="error" title="The import stopped" onDismiss={() => setOpen(false)}>
  Row 14 has no date. Fix it and import again.
</Alert>

Props

Prop	Type	Default	Description
tone	"info" \| "success" \| "warning" \| "error"	"info"	error is role=alert and interrupts; the rest are role=status
title / children	ReactNode	-	What happened, then the detail and the next step
action	ReactNode	-	An ArrowLink or a Button
onDismiss / dismissLabel	() => void / string	-	Only for a notice that can be put away