Peringatan

Peringatan memberi tahu pembaca sesuatu tentang halaman atau tindakan yang baru mereka lakukan. Warnanya memilih ikon dan peran ARIA sekaligus: danger dan warning mengumumkan diri sebagai role="alert", selebihnya yang lebih tenang menjadi role="status" yang sopan.

Warna

Perhatian
Versi baru sitelo tersedia.
Diterapkan
169 halaman diterbitkan dalam 1,7 detik.
Catatan
Island dimatikan di proyek ini.
stack({ gap: 'sm' },
  alert({ color: 'primary', title: 'Perhatian' }, 'Versi baru sitelo tersedia.'),
  alert({ color: 'success', title: 'Diterapkan' }, '169 halaman diterbitkan dalam 1,7 detik.'),
  alert({ color: 'warning', title: 'Halaman lambat' }, 'Satu halaman butuh lebih dari 500 ms untuk dirender.'),
  alert({ color: 'danger', title: 'Build gagal' }, 'Dua tautan internal menunjuk halaman yang tidak ada.'),
  alert({ color: 'neutral', title: 'Catatan' }, 'Island dimatikan di proyek ini.'),
)

Tanpa judul

Peringatan satu baris tidak butuh judul di atas kalimatnya.

Tersimpan.
stack({ gap: 'sm' },
  alert({ color: 'success' }, 'Tersimpan.'),
  alert({ color: 'danger' }, 'Alamat email itu sudah dipakai.'),
)

Varian

stack({ gap: 'sm' },
  alert({ color: 'warning', variant: 'soft', title: 'Soft' }, 'Bawaannya — permukaan berwarna lembut.'),
  alert({ color: 'warning', variant: 'outline', title: 'Outline' }, 'Transparan, dengan batas berwarna.'),
  alert({ color: 'warning', variant: 'solid', title: 'Solid' }, 'Warna palet penuh, untuk sesuatu yang tidak boleh terlewat.'),
)

Ikon

Setiap warna punya ikon bawaan. Berikan markup Anda sendiri sebagai icon, atau icon: false agar tidak ada ikon.

Tanpa ikon
Hanya teksnya.
Ikon khusus
SVG apa pun bisa — ikon adalah markup, bukan dependensi.
stack({ gap: 'sm' },
  alert({ color: 'primary', icon: false, title: 'Tanpa ikon' }, 'Hanya teksnya.'),
  alert({
    color: 'primary',
    title: 'Ikon khusus',
    icon: icon('star'),
  }, 'SVG apa pun bisa — ikon adalah markup, bukan dependensi.'),
)

Bisa ditutup

Tombol tutupnya membawa penangannya sendiri:

onclick="import('/su/alert.js').then(m=>m.dismiss(this))"

Jadi peringatan di bawah ini benar-benar menutup tanpa ada yang diimpor di halaman ini. Jika modul itu tidak pernah datang, tombolnya tetap dirender dan tidak melakukan apa-apa — itulah sebabnya peringatan tidak boleh menjadi satu-satunya tempat sebuah pesan muncul.

Bisa ditutup
Klik × — penangannya mengambil dirinya sendiri pada tekanan pertama.
alert({ color: 'primary', title: 'Bisa ditutup', dismissible: true },
  'Klik × — penangannya mengambil dirinya sendiri pada tekanan pertama.',
)

Konten kaya

Peringatan menerima anak apa pun, jadi sebuah tindakan atau daftar bisa tinggal di dalamnya.

alert({ color: 'danger', title: 'Pemeriksaan tautan gagal' },
  stack({ gap: 'sm' },
    text({ variant: 'small' }, 'Dua tautan menunjuk halaman yang tidak dihasilkan:'),
    list({ plain: true },
      listItem({ title: '/docs/old-routing', description: 'ditautkan dari /docs' }),
      listItem({ title: '/blog/draft', description: 'ditautkan dari /blog' }),
    ),
    stack({ direction: 'row', gap: 'sm' },
      button({ size: 'sm', color: 'danger' }, 'Tampilkan detail'),
      button({ size: 'sm', variant: 'ghost', color: 'danger' }, 'Abaikan'),
    ),
  ),
)

Props

PropTipeBawaanDeskripsi
color'primary' | 'neutral' | 'success' | 'warning' | 'danger''primary'Memilih palet, ikon bawaan, dan peran ARIA-nya.
variant'soft' | 'outline' | 'solid''soft'Seberapa berat bobot yang dibawa peringatannya.
titleChild—Baris pertama yang tebal.
iconChild | false—Markup ikon khusus, atau false agar tidak ada.
dismissiblebooleanfalseMenambahkan tombol tutup yang mengimpor penangannya sendiri.
dismissLabelstring'Dismiss'Nama yang dapat diakses untuk tombol itu.