ionic 按钮

Ionic 7+（2025 年最新）最全、最实用的 按钮（ion-button）用法大全，直接复制就能用，涵盖所有常见场景！

一、基础按钮（5 种外观）

<!-- 1. 默认（灰色边框） -->
<ion-button>默认按钮</ion-button>

<!-- 2. 实心主色（最常用） -->
<ion-button fill="solid">实心按钮</ion-button>

<!-- 3. 透明背景（常用于工具栏） -->
<ion-button fill="clear">透明按钮</ion-button>

<!-- 4. 描边（边框按钮） -->
<ion-button fill="outline">描边按钮</ion-button>

<!-- 5. 纯文字（iOS 风格） -->
<ion-button fill="clear" color="medium">文字按钮</ion-button>

二、尺寸（大中小）

<ion-button size="large">大按钮</ion-button>
<ion-button>默认尺寸</ion-button>
<ion-button size="small">小按钮</ion-button>

三、颜色（内置 10 种 + 自定义）

<ion-button color="primary">蓝色（默认主色）</ion-button>
<ion-button color="secondary">紫色</ion-button>
<ion-button color="tertiary">青色</ion-button>
<ion-button color="success">绿色</ion-button>
<ion-button color="warning">橙色</ion-button>
<ion-button color="danger">红色</ion-button>
<ion-button color="light">浅灰</ion-button>
<ion-button color="medium">中灰</ion-button>
<ion-button color="dark">深灰</ion-button>

<!-- 自定义颜色（theme/variables.css 里加） -->
<ion-button color="myred">自定义红色</ion-button>

theme/variables.css 加入：

--ion-color-myred: #ff3b30;
--ion-color-myred-rgb: 255,59,48;
--ion-color-myred-contrast: #ffffff;

四、形状 & 样式

<!-- 圆角（默认就是） -->
<ion-button>圆角</ion-button>

<!-- 圆形按钮（常用于 FAB、拍照） -->
<ion-button shape="round">
  <ion-icon name="camera"></ion-icon>
</ion-button>

<!-- 满宽按钮（表单最常用） -->
<ion-button expand="block">块级按钮（占满一行）</ion-button>

<!-- 满宽 + 圆角更大 -->
<ion-button expand="full">满宽大圆角（iOS 风格）</ion-button>

五、图标按钮（左图标 / 右图标 / 只显示图标）

<!-- 文字 + 图标 -->
<ion-button>
  <ion-icon slot="start" name="home"></ion-icon>
  首页
</ion-button>

<ion-button>
  发送
  <ion-icon slot="end" name="send"></ion-icon>
</ion-button>

<!-- 纯图标按钮（工具栏、底部导航最常用） -->
<ion-button fill="clear">
  <ion-icon name="heart" size="large"></ion-icon>
</ion-button>

<!-- 图标 + 文字（垂直排列，常用于底部 Tab） -->
<ion-button>
  <ion-icon slot="icon-only" name="person"></ion-icon>
  <ion-label>我的</ion-label>
</ion-button>

六、特殊状态

<!-- 禁用 -->
<ion-button disabled>禁用状态</ion-button>

<!-- 加载中 -->
<ion-button [disabled]="loading">
  <ion-spinner *ngIf="loading"></ion-spinner>
  {{ loading ? '提交中...' : '提交订单' }}
</ion-button>

<!-- 强交互反馈（点击水波纹） -->
<ion-button strong="true">点击有水波纹</ion-button>

七、2025 年最常用的 8 个真实场景（直接复制）

<!-- 1. 登录页面主按钮 -->
<ion-button expand="block" color="primary" size="large">
  立即登录
</ion-button>

<!-- 2. 底部固定双按钮（购物车结算） -->
<ion-footer>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button fill="outline">加入购物车</ion-button>
    </ion-buttons>
    <ion-button slot="end" color="danger" expand="block">
      立即购买
    </ion-button>
  </ion-toolbar>
</ion-footer>

<!-- 3. 列表项右侧箭头按钮 -->
<ion-item>
  <ion-label>个人资料</ion-label>
  <ion-button fill="clear" slot="end">
    <ion-icon name="chevron-forward"></ion-icon>
  </ion-button>
</ion-item>

<!-- 4. 浮动操作按钮 FAB（拍照/发布） -->
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
  <ion-fab-button color="primary">
    <ion-icon name="add"></ion-icon>
  </ion-fab-button>
</ion-fab>

想要我直接发你一个「2025 最美按钮组件库页面」？包含 50+ 种按钮样式 + 暗黑模式自动适配，直接放进项目就能用，说一声就发 GitHub 链接！