# Shadcn UI Icon Button

> Use ShadIconButton and variants (primary, secondary, destructive, outline, ghost); loading state, gradient and shadow. Use when adding icon-only buttons or icon CTAs in a Flutter shadcn_ui app.

- Skill: `serverpod/shadcn-ui-icon-button` (Agent Skill)
- Install (CLI): `npx skillmds@latest add serverpod/shadcn-ui-icon-button`
- Raw SKILL.md: https://api.skillmd.com/api/skills/serverpod/shadcn-ui-icon-button/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: serverpod (https://skillmd.com/u/serverpod)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/serverpod/shadcn-ui-icon-button

---


# Shadcn UI — Icon Button

## Instructions

`ShadIconButton` displays an icon button. Variants: default (primary), `ShadIconButton.secondary`, `ShadIconButton.destructive`, `ShadIconButton.outline`, `ShadIconButton.ghost`. Use `icon` and `onPressed`; optional `iconSize`, `padding`; support gradient and shadows.

### Variants

```dart
ShadIconButton(
  onPressed: () => print('Primary'),
  icon: const Icon(LucideIcons.rocket),
)

ShadIconButton.secondary(icon: const Icon(LucideIcons.rocket), onPressed: () {})

ShadIconButton.destructive(icon: const Icon(LucideIcons.rocket), onPressed: () {})

ShadIconButton.outline(icon: const Icon(LucideIcons.rocket), onPressed: () {})

ShadIconButton.ghost(icon: const Icon(LucideIcons.rocket), onPressed: () {})
```

### Loading

Use a small `CircularProgressIndicator` as `icon`:

```dart
ShadIconButton(
  icon: SizedBox.square(
    dimension: 16,
    child: CircularProgressIndicator(
      strokeWidth: 2,
      color: ShadTheme.of(context).colorScheme.primaryForeground,
    ),
  ),
)
```

### Gradient and shadow

```dart
ShadIconButton(
  gradient: const LinearGradient(colors: [Colors.cyan, Colors.indigo]),
  shadows: [
    BoxShadow(
      color: Colors.blue.withValues(alpha: .4),
      spreadRadius: 4,
      blurRadius: 10,
      offset: const Offset(0, 2),
    ),
  ],
  icon: const Icon(LucideIcons.rocket),
)
```