---
title: "Button (BloomButton) — Bloom UI Primitive"
description: "Displays a button or a component that looks like a button with 8 sizing steps, soft destructive tint, and loading state indicators."
category: "Form Controls"
url: "https://bloom-platform-ten.vercel.app/ui/button"
component_name: "BloomButton"
pub_package: "bloom_ui"
cli_command: "bloom ui add button"
last_updated: "2026-08-15"
---

# Button (`BloomButton`)

> Displays a button or a component that looks like a button with 8 sizing steps, soft destructive tint, and loading state indicators.

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

---

## 📦 Installation & Setup

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

### 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
BloomButton(
  variant: BloomButtonVariant.defaultVariant,
  size: BloomButtonSize.defaultSize,
  leading: const Icon(Icons.download, size: 16),
  onPressed: () {
    print('Deploying application...');
  },
  child: const Text('Deploy App'),
)
```

---

## 🛠️ API Reference

**Available Variants:** `defaultVariant`, `secondary`, `outline`, `ghost`, `destructive`, `link`

**Available Sizes:** `xs`, `sm`, `defaultSize`, `lg`, `iconXs`, `iconSm`, `icon`, `iconLg`

### Properties & Parameters

| Prop | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `child` | `Widget` | *Required* | The button content label or icon widget. |
| `onPressed` | `VoidCallback?` | *Required* | Callback invoked when button is tapped. |
| `variant` | `BloomButtonVariant` | `defaultVariant` | Visual style: default, secondary, outline, ghost, destructive, link. |
| `size` | `BloomButtonSize` | `defaultSize` | Dimension scale: xs (24px), sm (28px), default (32px), lg (36px). |
| `loading` | `bool` | `false` | Shows an inline loading spinner when true. |
| `disabled` | `bool` | `false` | Disables tap events and reduces opacity. |
| `leading` | `Widget?` | *Required* | Optional leading icon. |
| `trailing` | `Widget?` | *Required* | Optional trailing icon. |

---

## 🎨 Theming & Styling

BloomButton 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: BloomButton(...,
)
```

---

## 🔗 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)