Alert - React
Alert
import { Alert } from '@idds/react';Contoh Penggunaan
Section titled “Contoh Penggunaan”Contoh 1
Section titled “Contoh 1”Neutral Alert
Ini adalah alert dengan variant neutral.
Info Alert
Ini adalah alert dengan variant info.
Success Alert
Ini adalah alert dengan variant success.
Caution Alert
Ini adalah alert dengan variant caution.
Critical Alert
Ini adalah alert dengan variant critical.
Contoh 2
Section titled “Contoh 2”Dismissible Alert
Alert ini bisa di-dismiss dengan mengklik tombol close.
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
variant? | 'neutral' | 'info' | 'success' | 'caution' | 'critical' | 'info' | No | Variant warna alert. neutral → Putih dengan border, info → Biru, success → Hijau, caution → Oranye, critical → Merah. |
title? | string | — | No | Judul alert (singkat, biasanya satu baris). |
message? | ReactNode | — | No | Deskripsi/penjelasan di bawah judul (opsional, idealnya max dua baris). |
icon? | ReactNode | — | No | Icon custom untuk menggantikan icon default variant. |
dismissible? | boolean | false | No | Apakah alert bisa di-dismiss (menampilkan tombol close). |
dismissLabel? | string | 'Dismiss alert' | No | Label untuk tombol dismiss (accessibility). |
onDismiss? | () => void | — | No | Callback ketika alert di-dismiss. |
className? | string | '' | No | ClassName tambahan untuk override styling container. |