Button 按钮

按钮组件是界面中最基础的交互元素。通过灵活配置颜色、形状、尺寸及状态，引导用户完成点击操作并提供明确的意图传达。

基础用法

标准按钮采用白色背景与微妙的阴影效果，适用于页面中的次要操作或通用交互。

vue


<TButton>Link</TButton>

语义化变体

通过 color 属性使用语义化颜色，可以快速传达按钮的功能意图，帮助用户识别操作风险或重要程度。

vue


<TButton color="primary">Primary</TButton>
<TButton color="secondary">Secondary</TButton>
<TButton color="success">Success</TButton>
<TButton color="warning">Warning</TButton>
<TButton color="danger">Danger</TButton>
<TButton color="info">Info</TButton>
<TButton color="dark">Dark</TButton>
<TButton color="light">Light</TButton>

禁用状态

设置 disabled 属性可使按钮进入不可用外观。当业务逻辑未满足触发条件（如表单未填全）时，应禁用对应按钮以防止无效交互。

查看代码

vue


<TButton color="primary" disabled>Primary</TButton>
<TButton color="secondary" disabled>Secondary</TButton>
<TButton color="success" disabled>Success</TButton>
<TButton color="warning" disabled>Warning</TButton>
<TButton color="danger" disabled>Danger</TButton>
<TButton color="info" disabled>Info</TButton>
<TButton color="dark" disabled>Dark</TButton>
<TButton color="light" disabled>Light</TButton>

基础色彩

除了语义色，组件还支持 Tabler 标准色板。丰富的色彩选择有助于按钮与整体设计风格保持和谐一致。

查看代码

vue


<TButton color="blue">Blue</TButton>
<TButton color="azure">Azure</TButton>
<TButton color="indigo">Indigo</TButton>
<TButton color="purple">Purple</TButton>
<TButton color="pink">Pink</TButton>
<TButton color="red">Red</TButton>
<TButton color="yellow">Yellow</TButton>
<TButton color="lime">Lime</TButton>
<TButton color="green">Green</TButton>
<TButton color="teal">Teal</TButton>
<TButton color="cyan">Cyan</TButton>

幽灵按钮 (Ghost)

使用 ghost 属性创建无边框背景的按钮，仅在悬停时显现底色。适用于工具栏或需要最小化视觉干扰的场景。

查看代码

vue


<TButtonList class="p-2">
  <TButton color="azure" ghost size="sm">Primary</TButton>
  <TButton color="secondary" ghost size="sm">Secondary</TButton>
  <TButton color="success" ghost size="sm">Success</TButton>
  <TButton color="warning" ghost size="sm">Warning</TButton>
  <TButton color="danger" ghost size="sm">Danger</TButton>
  <TButton color="info" ghost size="sm">Info</TButton>
  <TButton color="dark" ghost size="sm">Dark</TButton>
  <TButton color="light" ghost size="sm">Light</TButton>
</TButtonList>
<br/>
<TButtonList class="p-2 bg-dark">
  <TButton color="azure" ghost size="sm">Primary</TButton>
  <TButton color="secondary" ghost size="sm">Secondary</TButton>
  <TButton color="success" ghost size="sm">Success</TButton>
  <TButton color="warning" ghost size="sm">Warning</TButton>
  <TButton color="danger" ghost size="sm">Danger</TButton>
  <TButton color="info" ghost size="sm">Info</TButton>
  <TButton color="dark" ghost size="sm">Dark</TButton>
  <TButton color="light" ghost size="sm">Light</TButton>
</TButtonList>

轮廓按钮 (Outline)

outline 属性可移除实体背景并保留主题色边框，常作为次要按钮使用，确保不会喧宾夺主。

查看代码

vue


<TButton color="primary" outline>Primary</TButton>
<TButton color="secondary" outline>Secondary</TButton>
<TButton color="success" outline>Success</TButton>
<TButton color="warning" outline>Warning</TButton>
<TButton color="danger" outline>Danger</TButton>
<TButton color="info" outline>Info</TButton>
<TButton color="dark" outline>Dark</TButton>
<TButton color="light" outline>Light</TButton>

方形按钮 (square)

如果希望按钮的角为直角而非圆角，可使用 square 属性来移除边框圆角。

vue


<TButton square>Square button</TButton>

胶囊按钮 (pill)

为组件添加 pill 属性使其变为圆角样式，呈现现代且吸引人的外观。

vue


<TButton pill>Pill button</TButton>

尺寸规格

提供从 sm 到 xl 的多种尺寸选项。合理的尺寸差异有助于在复杂页面中引导用户的视觉优先级。

查看代码

vue


<TButtonList>
  <TButton size="sm" color="primary">Small button</TButton>
  <TButton size="sm">Small button</TButton>
</TButtonList>
<br/>
<TButtonList>
  <TButton color="primary">Button</TButton>
  <TButton>Button</TButton>
</TButtonList>
<br/>
<TButtonList>
  <TButton size="lg" color="primary">Large button</TButton>
  <TButton size="lg">Large button</TButton>
</TButtonList>
<br/>
<TButtonList>
  <TButton size="xl" color="primary">Large button</TButton>
  <TButton size="xl">Large button</TButton>
</TButtonList>

图标组合

为按钮添加文字标签并配上图标，以清晰传达操作含义，方便用户快速识别。

图标易于辨认，还能提升按钮设计的美观度，使其更具现代感和吸引力。

所有图标请参见：Tabler Icons。

建议为图标添加 .icon 类名以获得最佳的垂直对齐效果。

查看代码

vue


<TButtonList>
  <TButton>
    <IconUpload class="icon icon-1"></IconUpload>
    Upload
  </TButton>
  <TButton color="warning">
    <IconHeart class="icon icon-1"></IconHeart>
    I like
  </TButton>
  <TButton color="success">
    <IconCheck class="icon icon-1"></IconCheck>
    I agree
  </TButton>
  <TButton color="primary">
    <IconPlus class="icon icon-1"></IconPlus>
    More
  </TButton>
  <TButton color="danger">
    <IconLink class="icon icon-1"></IconLink>
    Link
  </TButton>
  <TButton color="info">
    <IconMessage class="icon icon-1"></IconMessage>
    Comment
  </TButton>
</TButtonList>

纯图标模式 (Icon Only)

添加 iconOnly 属性可移除按钮中不必要的内边距，，使按钮呈现完美的正方形。

这样既能节省空间，又便于用户快速识别操作含义。

查看代码

vue


<TButtonList>
  <TButton iconOnly>
    <IconUpload></IconUpload>
  </TButton>
  <TButton iconOnly color="warning">
    <IconHeart></IconHeart>
  </TButton>
  <TButton iconOnly color="success">
    <IconCheck></IconCheck>
  </TButton>
  <TButton iconOnly color="primary">
    <IconPlus></IconPlus>
  </TButton>
  <TButton iconOnly color="danger">
    <IconLink></IconLink>
  </TButton>
  <TButton iconOnly color="info">
    <IconMessage></IconMessage>
  </TButton>
</TButtonList>

挂载徽章

在按钮上添加徽章，可以用来展示数量、通知或状态标识等附加信息。

徽章会自动在按钮布局中找到合适的位置进行排列。

查看代码

vue


<TButtonList>
  <TButton>
    Notifications
    <TBadge class="ms-2">14</TBadge>
  </TButton>
  <TButton>
    Messages
    <TBadge class="ms-2">3</TBadge>
  </TButton>
  <TButton>
    Alerts
    <TBadge class="ms-2">7</TBadge>
  </TButton>
</TButtonList>

链接按钮

使用 link 可以创建外观像普通链接、但保留按钮功能的样式。

这种按钮非常适合用于次要操作，因为它们不会喧宾夺主，能有效避免抢夺主要按钮的注意力。

vue


<TButton link>Link button</TButton>
&nbsp;
<TButton link>Link button</TButton>

此外，组件已深度集成 Vue Router。

在项目中引入路由后，只需通过配置 to 属性即可轻松实现应用的内部导航。

vue


<TButton to="/dashboard" link>Dashboard</TButton>

加载状态按钮

添加 loading 属性可以在触发异步操作时展示 Spinner 动画，并自动禁用按钮防止重复点击。

这样一来，用户就能清楚了解当前操作的进展，不会因为等待时间过长而中途放弃。

vue


<TButton color="primary" loading>
  Button
</TButton>
&nbsp;
<TButton color="primary" loading>
  Loading button with loooong content
</TButton>

当然你也可以在默认插槽中添加 <span class="spinner-border spinner-border-sm me-2"></span> 来实现旋转与按钮内容同时展示。

vue


<TButton color="primary">
  <span class="spinner-border spinner-border-sm me-2"></span>
  Button
</TButton>

响应式全宽

添加 full 属性可以让按钮的宽度撑满整个容器。

这种设计在移动端优先的布局中非常实用，或者当你希望按钮占据全部可用空间时也可以使用。

vue


<TButton color="primary" full>
  Full width button
</TButton>
<br/>
<br/>
<TButton full outline>
  Full width outline button
</TButton>

动作按钮 (Action)

使用 action 属性可以创建低调的操作按钮，非常适合用在卡片头部、工具栏，或者其他希望视觉干扰最小化的界面元素中。

查看代码

vue


<TButton action>
  <IconEdit class="icon icon-1"></IconEdit>
</TButton>
<TButton action>
  <IconCopy class="icon icon-1"></IconCopy>
</TButton>
<TButton action>
  <IconSettings class="icon icon-1"></IconSettings>
</TButton>
<TButton action>
  <IconTrash class="icon icon-1"></IconTrash>
</TButton>

API

TButton 属性 (Props)

属性名	说明	类型	默认值
`color`	按钮颜色，支持语义色、标准色及 `-lt` 浅色变体。	`TablerColor`	`'default'`
`size`	按钮尺寸。	`sm` \| `lg` \| `xl`	`undefined`
`pill`	是否应用胶囊形态（完全圆角）。	`boolean`	`false`
`square`	是否应用方形形态（直角）。	`boolean`	`false`
`outline`	是否为轮廓风格。	`boolean`	`false`
`ghost`	是否为幽灵风格（仅 Hover 显示背景）。	`boolean`	`false`
`link`	是否渲染为链接风格。	`boolean`	`false`
`loading`	是否处于加载状态。	`boolean`	`false`
`disabled`	是否禁用。	`boolean`	`false`
`full`	是否撑满父容器宽度。	`boolean`	`false`
`iconOnly`	是否为纯图标按钮。	`boolean`	`false`
`action`	是否为动作按钮风格。	`boolean`	`false`
`href`	原生跳转链接，设置后渲染为 `<a>` 标签。	`string`	`undefined`
`to`	路由跳转目标，设置后渲染为 `<router-link>`。	`RouteLocationRaw`	`undefined`

TButton 插槽 (Slots)

插槽名	说明
`default`	按钮内部的内容。

Button 按钮 ​

基础用法 ​

语义化变体 ​

禁用状态 ​

基础色彩 ​

幽灵按钮 (Ghost) ​

轮廓按钮 (Outline) ​

方形按钮 (square) ​

胶囊按钮 (pill) ​

尺寸规格 ​

图标组合 ​

纯图标模式 (Icon Only) ​

挂载徽章 ​

链接按钮 ​

加载状态按钮 ​

响应式全宽 ​

动作按钮 (Action) ​

API ​

TButton 属性 (Props) ​

TButton 插槽 (Slots) ​

Button 按钮

基础用法

语义化变体

禁用状态

基础色彩

幽灵按钮 (Ghost)

轮廓按钮 (Outline)

方形按钮 (square)

胶囊按钮 (pill)

尺寸规格

图标组合

纯图标模式 (Icon Only)

挂载徽章

链接按钮

加载状态按钮

响应式全宽

动作按钮 (Action)

API

TButton 属性 (Props)

TButton 插槽 (Slots)