Alert

Banner status inline (info/success/warning/error/neutral) dengan ikon bawaan, 3 variant, dan opsi dismissible.

import { Alert } from "@naraya/ui";

Examples

Tones

Info

Versi baru tersedia, silakan refresh.

Berhasil

Data berhasil disimpan.

Perhatian

Kuota penyimpanan hampir penuh.

Gagal

Koneksi ke server terputus.

<Alert tone="info" title="Info">Versi baru tersedia.</Alert>
<Alert tone="success" title="Berhasil">Data disimpan.</Alert>
<Alert tone="warning" title="Perhatian">Kuota hampir penuh.</Alert>
<Alert tone="error" title="Gagal">Koneksi terputus.</Alert>

Variants

Soft

Default — latar lembut.

Solid

Latar penuh, kontras tinggi.

Outline

Garis tepi, latar surface.

<Alert variant="soft" tone="success">...</Alert>
<Alert variant="solid" tone="success">...</Alert>
<Alert variant="outline" tone="success">...</Alert>

Dismissible & tanpa title

Notifikasi yang bisa ditutup.

Tanpa ikon (icon={null}).

<Alert tone="info" dismissible onDismiss={() => {}}>
  Notifikasi yang bisa ditutup.
</Alert>

<Alert tone="warning" icon={null}>Tanpa ikon.</Alert>

Props

Prop	Type	Default	Description
tone	`"info" \| "success" \| "warning" \| "error" \| "neutral"`	`"info"`	Warna semantik + ikon bawaan.
variant	`"soft" \| "solid" \| "outline"`	`"soft"`	Gaya visual.
title	`ReactNode`	—	Judul tebal di atas body.
icon	`ReactNode \| null`	—	Override ikon tone. null = sembunyikan ikon.
dismissible	`boolean`	`false`	Tampilkan tombol tutup (✕).
onDismiss	`() => void`	—	Dipanggil saat alert ditutup.
children	`ReactNode`	—	Isi/body alert.

Tokens Used

--color-info / success / warning / error

Warna per tone

--color-*-content

Teks pada variant solid

--bg-surface

Latar variant outline

--text-main

Teks body (soft/outline)

Alert

Examples

Props

Tokens Used

Accessibility

Related