---
title: "Dialog (BloomDialog) — Bloom UI Primitive"
description: "A modal window that appears in front of app content with shaded footer and compound title/description slots."
category: "Feedback & Overlays"
url: "https://bloom-platform-ten.vercel.app/ui/dialog"
component_name: "BloomDialog"
pub_package: "bloom_ui"
cli_command: "bloom ui add dialog"
last_updated: "2026-08-15"
---

# Dialog (`BloomDialog`)

> A modal window that appears in front of app content with shaded footer and compound title/description slots.

**Category:** Feedback & Overlays  
**Package:** [`bloom_ui`](https://pub.dev/packages/bloom_ui)  
**CLI Install:** `bloom ui add dialog`  
**Web Preview:** [https://bloom-platform-ten.vercel.app/ui/dialog](https://bloom-platform-ten.vercel.app/ui/dialog)

---

## 📦 Installation & Setup

### 1. Using Bloom CLI (Recommended)
Add the source code directly to your project without rigid package locks:
```bash
bloom ui add dialog
```

### 2. Using Pub.dev Package
Add the dependency to your `pubspec.yaml`:
```yaml
dependencies:
  bloom_ui: ^0.1.0
```

### 3. Import in Dart
```dart
import 'package:bloom_ui/bloom_ui.dart';
```

---

## 🚀 Usage Example

```dart
BloomDialog.show(
  context: context,
  builder: (ctx) => BloomDialog(
    header: const BloomDialogHeader(
      title: BloomDialogTitle('Edit Profile'),
      description: BloomDialogDescription('Make changes to your account here.'),
    ),
    content: const BloomInput(placeholder: 'Display Name'),
    footer: BloomDialogFooter(
      child: BloomButton(
        size: BloomButtonSize.sm,
        onPressed: () => Navigator.pop(ctx),
        child: const Text('Save'),
      ),
    ),
  ),
)
```

---

## 🛠️ API Reference

### Sub-Components & Slots

| Sub-Component | Description |
| :--- | :--- |
| `BloomDialogHeader` | Header container with title and description. |
| `BloomDialogTitle` | Bold dialog title. |
| `BloomDialogDescription` | Muted subtitle explanation. |
| `BloomDialogContent` | Main dialog body. |
| `BloomDialogFooter` | Shaded footer bar for action buttons. |

### Properties & Parameters

| Prop | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `title` | `Widget?` | *Required* | Title slot widget. |
| `description` | `Widget?` | *Required* | Description slot widget. |
| `content` | `Widget?` | *Required* | Content body. |
| `footer` | `Widget?` | *Required* | Action button row. |

---

## 🎨 Theming & Styling

BloomDialog automatically respects the active `BloomTheme` (including `BloomTheme.novaLight`, `BloomTheme.novaDark`, etc.) and responds seamlessly to dark mode changes, custom border radii, and brand color tokens.

### Theme Overrides Example
```dart
Theme(
  data: Theme.of(context).copyWith(
    extensions: [
      context.bloomTheme.copyWith(
        colors: context.bloomColors.copyWith(
          primary: const Color(0xFF8B5CF6), // Custom Purple Accent
        ),
      ),
    ],
  ),
  child: BloomDialog.show(...,
)
```

---

## 🔗 Related Resources
- [Components Gallery](https://bloom-platform-ten.vercel.app/ui)
- [Bloom Theming & Tokens Guide](https://bloom-platform-ten.vercel.app/docs/theming)
- [Application Blocks Catalog](https://bloom-platform-ten.vercel.app/blocks)
- [Bloom CLI Master Overview](https://bloom-platform-ten.vercel.app/docs/cli)