Thành phần

Alert

Alert panel with a state per variant: tint-1 info, check success, hatched tint-2 warning, 2px ink rule error.

Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.

Draft saved

Your changes are kept as a draft until an editor publishes them.

Install

bash

npx shadcn add @eloquent/alert

Usage

tsx

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

<Alert variant="destructive">
  <AlertTitle>Upload failed</AlertTitle>
  <AlertDescription>Check the file and try again.</AlertDescription>
</Alert>

States

Information

A tint-1 panel under a hairline rule.

Published

The edition is live. A check icon marks success.

Unsaved changes

A hatched tint-2 band marks a warning.

Upload failed

A 2px ink rule and an icon mark an error. Check the file and try again.

State	Treatment
`default`	tint-1 panel, hairline top rule, info icon, `role="status"`
`success`	Hairline top rule, check icon, `role="status"`
`warning`	tint-2 panel with a hatched band, warning icon, `role="status"`
`destructive`	2px ink left rule, ! icon, message, `role="alert"`

Keyboard

This component is not interactive. It is not a tab stop, so Tab skips it.

Key	Action
Tab	Skips it; not a tab stop

Vietnamese

Đã lưu bản nháp

Các thay đổi được giữ dưới dạng bản nháp cho đến khi biên tập viên đăng.

Ink adaptation

Upstream's coloured destructive text becomes a 2px ink left rule, an ink icon and a message. Info is a tint-1 panel with a hairline top rule; success adds a check icon; warning is a tint-2 panel with a hatched band. Every state has an icon, so none relies on colour.