TButton / 按钮

Button is the most basic interactive element for triggering operations, submitting forms, or navigating pages. / 按钮是界面中最基础的交互元素，用于触发操作、提交表单或页面导航。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
color	TablerColor	'default'	Button color (primary, success, danger, etc.)
size	'sm' | 'lg' | 'xl'	—	Size
outline	boolean	false	Outline style
ghost	boolean	false	Ghost style (background on hover only)
loading	boolean	false	Loading state (disabled + spinner)
disabled	boolean	false	Disabled
pill	boolean	false	Pill shape (fully rounded)
square	boolean	false	Square shape (right angles)
full	boolean	false	Full width block
iconOnly	boolean	false	Icon-only button
href	string	—	Native link (renders <a>)
to	RouteLocationRaw	—	Router link (renders <router-link>)
link	boolean	false	Link style
action	boolean	false	Action button style

Slots / 插槽

Slot	Description / 说明
default	Button content (text or icons) / 按钮内部内容

Basic Usage / 基础用法

<script setup lang="ts">
import { TButton } from '@gulcc/tabler-vue'
</script>

<template>
  <TButton color="primary">Submit / 提交</TButton>
  <TButton color="success" outline>Outline / 轮廓</TButton>
  <TButton color="danger" ghost>Ghost / 幽灵</TButton>
  <TButton :loading="true">Loading / 加载中</TButton>
  <TButton disabled>Disabled / 禁用</TButton>
</template>

Advanced Usage / 进阶场景

<script setup lang="ts">
import { TButton, TButtonList } from '@gulcc/tabler-vue'
import { IconHeart, IconTrash } from '@tabler/icons-vue'

const isSaving = ref(false)
async function handleSave() {
  isSaving.value = true
  await saveData()
  isSaving.value = false
}
</script>

<template>
  <!-- Button group / 按钮组 -->
  <TButtonList>
    <TButton color="primary" :loading="isSaving" @click="handleSave">
      <IconHeart class="me-1" :size="18" /> Save / 保存
    </TButton>
    <TButton color="danger" iconOnly @click="handleDelete">
      <IconTrash :size="18" />
    </TButton>
    <TButton color="secondary" outline>Cancel / 取消</TButton>
  </TButtonList>

  <!-- Router navigation / 路由导航 -->
  <TButton color="primary" to="/dashboard">Go to Dashboard / 前往仪表盘</TButton>

  <!-- Full width / 全宽 -->
  <TButton color="success" full>Submit Order / 提交订单</TButton>
</template>

Tips / 避坑指南

• loading and disabled work together: loading=true automatically disables the button
• When href or to is set, renders as <a> or <router-link> — type prop is ignored
• Always add iconOnly for pure icon buttons, otherwise extra padding appears around the icon
• When using '-lt' light color variants (e.g. 'green-lt') with ghost or outline mode, the -lt suffix is automatically stripped