Back to Details

shadcn_ui-icon-button

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Shadcn UI — Icon Button

Shadcn UI — 图标按钮

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.
ShadIconButton
用于显示图标按钮。变体包括：默认（primary）、
ShadIconButton.secondary
、
ShadIconButton.destructive
、
ShadIconButton.outline
、
ShadIconButton.ghost
。使用
icon
和
onPressed
属性；可选属性包括
iconSize
、
padding
；支持渐变和阴影效果。

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: () {})
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,
    ),
  ),
)
使用小型
CircularProgressIndicator
作为
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),
)
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),
)