Button 按钮

用于触发操作，支持语义变体、尺寸和 asChild 渲染。

命令行安装

npx @loongship-kit/ui add button

基础与变体

查看代码

<script setup lang="ts">
import { Button } from '@/components/loongship/button'
</script>

<template>
  <Button variant="default">Default</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="ghost">Ghost</Button>
  <Button variant="destructive">Destructive</Button>
  <Button variant="link">Link</Button>
</template>

尺寸

查看代码

<template>
  <Button size="sm">Small</Button>
  <Button size="default">Default</Button>
  <Button size="lg">Large</Button>
</template>

图标按钮

图标按钮需要可访问名称

仅显示图标时使用 icon、icon-sm 或 icon-lg，并通过 aria-label 提供可访问名称。

查看代码

<script setup lang="ts">
import { Button } from '@/components/loongship/button'
import { Icon } from '@/components/loongship/icon'
</script>

<template>
  <Button size="icon-sm" variant="outline" aria-label="Previous">
    <Icon name="arrow-left" size="sm" />
  </Button>

  <Button size="icon" variant="outline" aria-label="Search">
    <Icon name="search" size="md" />
  </Button>

  <Button size="icon-lg" variant="outline" aria-label="Next">
    <Icon name="arrow-right" size="lg" />
  </Button>
</template>

禁用状态

查看代码

<template>
  <Button disabled>Disabled Button</Button>
</template>

加载状态

加载状态行为

loading 会同时设置不可操作状态和 aria-busy，并保留按钮宽度，避免异步操作时布局跳动。

查看代码

<template>
  <Button loading>正在保存航次</Button>
  <Button loading variant="outline">正在同步船位</Button>
</template>

子元素渲染

asChild 将按钮行为和样式应用到唯一子元素，例如链接。

Anchor Element Button

查看代码

<template>
  <Button as-child>
    <a href="#button-as-child">Anchor Element Button</a>
  </Button>
</template>

API

属性

属性	类型	默认值	说明
variant	'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link'	'default'	视觉样式
size	'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg'	'default'	尺寸
as	string | Component	'button'	渲染元素
asChild	boolean	false	将属性、行为和样式合并到唯一子元素
loading	boolean	false	显示加载反馈并保持按钮宽度
class	ClassValue	-	自定义类名

原生属性

渲染为 button 时可使用 type、name、value、disabled、form、autofocus、aria-*、data-* 等标准按钮属性。默认 type 遵循浏览器规则；表单内建议显式设置 type="button" 或 type="submit"。

事件

事件	参数	说明
click	MouseEvent	点击时触发
focus / blur	FocusEvent	获得或失去焦点时触发
keydown / keyup	KeyboardEvent	键盘交互时触发
指针事件	PointerEvent	指针交互时触发

类型

类型	说明
ButtonProps	Button 的自定义 Props 与 Reka Primitive 属性
ButtonVariant	单个视觉样式值
ButtonSize	单个尺寸值
ButtonVariants	variant 与 size 的组合类型

插槽

插槽	参数	说明
default	—	按钮文本、图标或唯一子元素