---
title: "Alert"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "JS-free Tailwind CSS Alert with info, success, warning, and error variants. Accessible, icon-ready, and theme-aware for effective in-page notifications."
url: https://frutjam.com/tr/components/alert
---

# Alert Component

| Sınıf            | Tip         | Tanım                          |
| ---------------- | ----------- | ------------------------------ |
| alert            | Temel       | Bağlamsal mesaj başlığı        |
| alert-outline    | Stil        | Renkli kenarlıklı şeffaf dolgu |
| alert-soft       | Stil        | Sessiz renkli arka plan        |
| alert-ghost      | Stil        | Kenarlıksız ince arka plan     |
| alert-dashed     | Stil        | Kesikli kenarlık stili         |
| alert-pill       | Stil        | Tamamen yuvarlak hap şekli     |
| alert-rounded    | Stil        | Orta yuvarlama                 |
| alert-horizontal | Değiştirici | Yatay esnek düzen              |
| alert-vertical   | Değiştirici | Dikey yığılmış düzen           |
| alert-xs         | Boyut       | Ekstra küçük                   |
| alert-sm         | Boyut       | Küçük                          |
| alert-md         | Boyut       | Orta (varsayılan)              |
| alert-lg         | Boyut       | Büyük                          |
| alert-primary    | Renk        | Birincil tema rengi            |
| alert-secondary  | Renk        | İkincil tema rengi             |
| alert-accent     | Renk        | Vurgu teması rengi             |
| alert-neutral    | Renk        | Nötr tema rengi                |
| alert-info       | Renk        | Bilgi anlamsal rengi           |
| alert-success    | Renk        | Başarı anlamsal rengi          |
| alert-warning    | Renk        | Uyarı anlamsal rengi           |
| alert-error      | Renk        | Hata anlamsal rengi            |

## Temel Kullanım

## Uyarı Renkleri

```html
<!-- Default -->
<div role="alert" class="alert">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    <span>This is a Default Alert.</span>
</div>
<!-- Primary -->
<div role="alert" class="alert alert-primary">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>
    <span>This is a Primary Alert.</span>
</div>
<!-- Secondary -->
 <div role="alert" class="alert alert-secondary">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    <span>This is a Secondary Alert.</span>
</div>
<!-- Accent -->
<div role="alert" class="alert alert-accent">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    <span>This is a Accent Alert.</span>
</div>
<!-- Info -->
<div role="alert" class="alert alert-info">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg>
    <span>This is a Info Alert.</span>
</div>
<!-- Success -->
<div role="alert" class="alert alert-success">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
    <span>This is a Success Alert.</span>
</div>
<!-- Warning -->
<div role="alert" class="alert alert-warning">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
    <span>This is a Warning Alert.</span>
</div>
<!-- Error -->
<div role="alert" class="alert alert-error">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
    <span>This is a Error Alert.</span>
</div>
<!-- Neutral -->
<div role="alert" class="alert alert-neutral">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
    <span>This is a Neutral Alert.</span>
</div>
```

## Uyarı Yönü

### Yatay Uyarı

```html
<div role="alert" class="alert alert-horizontal">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    <span>Horizontal direction alert.</span>
</div>
```

### Dikey Uyarı

```html
<div role="alert" class="alert alert-vertical">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    <span>Vertical direction alert.</span>
</div>
```

## Uyarı Şekilleri

### Hap Uyarısı

```html
<div role="alert" class="alert alert-primary alert-pill">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    <span>Pill shape alert component.</span>
</div>
```

### Yuvarlak Uyarı

```html
<div role="alert" class="alert alert-success alert-rounded">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
    <span>Rounded shape alert component.</span>
</div>
```

## Uyarı Stilleri

### Esnek Uyarılar

```html
<div role="alert" class="alert alert-soft">
  <span>You have 99+ new notifications.</span>
</div>
<div role="alert" class="alert alert-primary alert-soft">
  <span>New version of UI update is available.</span>
</div>
<div role="alert" class="alert alert-secondary alert-soft">
  <span>Trial period active: 14 days remaining.</span>
</div>
<div role="alert" class="alert alert-accent alert-soft">
  <span>Your subscription will renew in 3 days.</span>
</div>
<div role="alert" class="alert alert-info alert-soft">
  <span>Note: All components are WCAG compliant.</span>
</div>
<div role="alert" class="alert alert-success alert-soft">
  <span>Success: Frutjam UI installed successfully.</span>
</div>
<div role="alert" class="alert alert-warning alert-soft">
  <span>Warning: Invalid email address. Please Retry.</span>
</div>
<div role="alert" class="alert alert-error alert-soft">
  <span>Error: Your session has expired. Log in again.</span>
</div>
<div role="alert" class="alert alert-neutral alert-soft">
  <span>Profile 80% complete. Add a photo to finish.</span>
</div>
```

### Anahat Uyarıları

```html
<div role="alert" class="alert alert-outline">
  <span>You have 99+ new notifications.</span>
</div>
<div role="alert" class="alert alert-primary alert-outline">
  <span>New version of UI update is available.</span>
</div>
<div role="alert" class="alert alert-secondary alert-outline">
  <span>Trial period active: 14 days remaining.</span>
</div>
<div role="alert" class="alert alert-accent alert-outline">
  <span>Your subscription will renew in 3 days.</span>
</div>
<div role="alert" class="alert alert-info alert-outline">
  <span>Note: All components are WCAG compliant.</span>
</div>
<div role="alert" class="alert alert-success alert-outline">
  <span>Success: Frutjam UI installed successfully.</span>
</div>
<div role="alert" class="alert alert-warning alert-outline">
  <span>Warning: Invalid email address. Please Retry.</span>
</div>
<div role="alert" class="alert alert-error alert-outline">
  <span>Error: Your session has expired. Log in again.</span>
</div>
<div role="alert" class="alert alert-neutral alert-outline">
  <span>Profile 80% complete. Add a photo to finish.</span>
</div>
```

### Kesikli Uyarılar

```html
<div role="alert" class="alert alert-dashed">
  <span>You have 99+ new notifications.</span>
</div>
<div role="alert" class="alert alert-primary alert-dashed">
  <span>New version of UI update is available.</span>
</div>
<div role="alert" class="alert alert-secondary alert-dashed">
  <span>Trial period active: 14 days remaining.</span>
</div>
<div role="alert" class="alert alert-accent alert-dashed">
  <span>Your subscription will renew in 3 days.</span>
</div>
<div role="alert" class="alert alert-info alert-dashed">
  <span>Note: All components are WCAG compliant.</span>
</div>
<div role="alert" class="alert alert-success alert-dashed">
  <span>Success: Frutjam UI installed successfully.</span>
</div>
<div role="alert" class="alert alert-warning alert-dashed">
  <span>Warning: Invalid email address. Please Retry.</span>
</div>
<div role="alert" class="alert alert-error alert-dashed">
  <span>Error: Your session has expired. Log in again.</span>
</div>
<div role="alert" class="alert alert-neutral alert-dashed">
  <span>Profile 80% complete. Add a photo to finish.</span>
</div>
```

### Hayalet Uyarıları

```html
<div role="alert" class="alert alert-ghost">
  <span>You have 99+ new notifications.</span>
</div>
<div role="alert" class="alert alert-primary alert-ghost">
  <span>New version of UI update is available.</span>
</div>
<div role="alert" class="alert alert-secondary alert-ghost">
  <span>Trial period active: 14 days remaining.</span>
</div>
<div role="alert" class="alert alert-accent alert-ghost">
  <span>Your subscription will renew in 3 days.</span>
</div>
<div role="alert" class="alert alert-info alert-ghost">
  <span>Note: All components are WCAG compliant.</span>
</div>
<div role="alert" class="alert alert-success alert-ghost">
  <span>Success: Frutjam UI installed successfully.</span>
</div>
<div role="alert" class="alert alert-warning alert-ghost">
  <span>Warning: Invalid email address. Please Retry.</span>
</div>
<div role="alert" class="alert alert-error alert-ghost">
  <span>Error: Your session has expired. Log in again.</span>
</div>
<div role="alert" class="alert alert-neutral alert-ghost">
  <span>Profile 80% complete. Add a photo to finish.</span>
</div>
```

## Uyarı Düzeni ve Davranışı

### Tam Genişlik Uyarıları

Bir **uyarının** kapsayıcısının tüm genişliğine yayılmasını sağlamak için `w-full` yardımcı program sınıfını kullanın. Bu, tüm renk ve stil çeşitleriyle çalışır.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

```html
<div role="alert" class="alert w-full">
    <span>You have 99+ new notifications.</span>
</div>
<div role="alert" class="alert alert-primary w-full">
    <span>New version of UI update is available.</span>
</div>
<div role="alert" class="alert alert-secondary w-full">
    <span>Trial period active: 14 days remaining.</span>
</div>
<div role="alert" class="alert alert-accent w-full">
    <span>Your subscription will renew in 3 days.</span>
</div>
<div role="alert" class="alert alert-info w-full">
    <span>Note: All components are WCAG compliant.</span>
</div>
<div role="alert" class="alert alert-success w-full">
    <span>Success: Frutjam UI installed successfully.</span>
</div>
<div role="alert" class="alert alert-warning w-full">
    <span>Warning: Invalid email address. Please Retry.</span>
</div>
<div role="alert" class="alert alert-error w-full">
    <span>Error: Your session has expired. Log in again.</span>
</div>
<div role="alert" class="alert alert-neutral w-full">
    <span>Profile 80% complete. Add a photo to finish.</span>
</div>
```

### Duyarlı Uyarı İstifleme

Bu uyarı, mobil cihazlarda dikey olarak birikir ve optimum ekran kullanımı için masaüstünde yatay olarak genişler.

```html
<div role="alert" class="alert alert-vertical sm:alert-horizontal">
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
  <span>Add a profile photo to reach 100%.</span>
  <div class="space-x-1.5">
    <button class="btn btn-sm">Skip</button>
    <button class="btn btn-sm btn-primary">Upload</button>
  </div>
</div>
```

### Zengin İçerikli Uyarı

```html
<div role="alert" class="alert alert-vertical sm:alert-horizontal w-full">
  <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/><rect x="2" y="4" width="20" height="16" rx="2"/></svg>
  <div>
    <h3 class="font-bold">New Emails!</h3>
    <div class="text-xs">You have 4 unread emails</div>
  </div>
  <button class="btn btn-sm">View</button>
</div>
```