表单

Button 操作按钮

用于操作按钮场景的 MoriUI 组件。

资源

导入

import { Button } from 'moriui'

鼠标指针

MoriUI 不覆盖可用按钮的默认鼠标指针；如项目需要 pointer，应在应用层为非禁用按钮配置。禁用按钮使用 cursor-not-allowed。

语义链接

MoriUI Button 可通过 as="a" 渲染真实链接；不要把链接行为伪装成按钮事件。

RTL

按钮内容沿逻辑方向排列，inline-start/inline-end 图标会随 dir 保持自然顺序。

示例

概览

文字按钮与仅图标按钮的基础组合。

<script setup lang="ts">
  import { Button } from 'moriui'
  import { ArrowUp } from '@lucide/vue'
</script>

<template>
  <div class="flex flex-wrap items-center gap-2">
    <Button variant="outline">
      按钮
    </Button>
    <Button size="icon" variant="outline" aria-label="提交">
      <ArrowUp />
    </Button>
  </div>
</template>

尺寸

文字和图标尺寸覆盖 xs 到 lg。

<script setup lang="ts">
  import { Button } from 'moriui'
  import { ArrowUpRight } from '@lucide/vue'
</script>

<template>
  <div class="flex flex-wrap items-start gap-4">
    <Button size="xs" variant="outline">
      超小
    </Button>
    <Button size="sm" variant="outline">
      小号
    </Button>
    <Button variant="outline">
      默认
    </Button>
    <Button size="lg" variant="outline">
      大号
    </Button>
    <Button size="icon" variant="outline" aria-label="打开">
      <ArrowUpRight />
    </Button>
  </div>
</template>

默认

高强调的主要操作。

<script setup lang="ts">
  import { Button } from 'moriui'
</script>

<template>
  <Button>默认按钮</Button>
</template>

描边

中性描边操作。

<script setup lang="ts">
  import { Button } from 'moriui'
</script>

<template>
  <Button variant="outline">
    描边按钮
  </Button>
</template>

次要

弱化的次级操作。

<script setup lang="ts">
  import { Button } from 'moriui'
</script>

<template>
  <Button variant="secondary">
    次要按钮
  </Button>
</template>

幽灵

工具栏中的低强调操作。

<script setup lang="ts">
  import { Button } from 'moriui'
</script>

<template>
  <Button variant="ghost">
    幽灵按钮
  </Button>
</template>

破坏性

表达删除等不可逆动作。

<script setup lang="ts">
  import { Button } from 'moriui'
</script>

<template>
  <Button variant="destructive">
    删除记录
  </Button>
</template>

链接样式

保留按钮语义的链接视觉。

<script setup lang="ts">
  import { Button } from 'moriui'
</script>

<template>
  <Button variant="link">
    查看详情
  </Button>
</template>

图标按钮

仅图标按钮使用 icon 尺寸和可访问名称。

<script setup lang="ts">
  import { Button } from 'moriui'
  import { CircleFadingArrowUp } from '@lucide/vue'
</script>

<template>
  <Button size="icon" variant="outline" aria-label="上传">
    <CircleFadingArrowUp />
  </Button>
</template>

带图标

用 data-icon 标识逻辑方向。

<script setup lang="ts">
  import { Button } from 'moriui'
  import { GitBranch, GitFork } from '@lucide/vue'
</script>

<template>
  <div class="flex gap-2">
    <Button variant="outline">
      <GitBranch data-icon="inline-start" />新建分支
    </Button>
    <Button variant="outline">
      复刻<GitFork data-icon="inline-end" />
    </Button>
  </div>
</template>

圆形

调用方 class 可覆盖圆角。

<script setup lang="ts">
  import { Button } from 'moriui'
  import { ArrowUp } from '@lucide/vue'
</script>

<template>
  <div class="flex gap-2">
    <Button class="rounded-full">
      开始使用
    </Button>
    <Button
      class="rounded-full"
      size="icon"
      variant="outline"
      aria-label="继续"
    >
      <ArrowUp />
    </Button>
  </div>
</template>

加载中

禁用按钮与旋转图标表达进行中状态。

<script setup lang="ts">
  import { Button } from 'moriui'
  import { LoaderCircle } from '@lucide/vue'
</script>

<template>
  <div class="flex gap-2">
    <Button disabled variant="outline">
      <LoaderCircle class="animate-spin" data-icon="inline-start" />生成中
    </Button>
    <Button disabled variant="secondary">
      下载中<LoaderCircle class="animate-spin" data-icon="inline-end" />
    </Button>
  </div>
</template>

按钮组

渲染为链接

通过 as="a" 输出语义正确的链接。

<script setup lang="ts">
  import { Button } from 'moriui'
</script>

<template>
  <Button
    as="a"
    href="#登录"
    size="sm"
    variant="secondary"
  >
    登录
  </Button>
</template>

RTL

阿拉伯语按钮沿 RTL 内容流排列。

<script setup lang="ts">
  import { Button } from 'moriui'
  import { ArrowRight, Plus } from '@lucide/vue'
</script>

<template>
  <div dir="rtl" class="flex flex-wrap items-center gap-2">
    <Button variant="outline">
      زر
    </Button>
    <Button variant="destructive">
      حذف
    </Button>
    <Button variant="outline">
      إرسال<ArrowRight class="rtl:rotate-180" data-icon="inline-end" />
    </Button>
    <Button size="icon" variant="outline" aria-label="إضافة">
      <Plus />
    </Button>
  </div>
</template>

API

属性	类型	默认值	说明
variant	`'default' \| 'outline' \| 'secondary' \| 'ghost' \| 'destructive' \| 'link'`	`'default'`	按钮视觉层级。
size	`'xs' \| 'sm' \| 'default' \| 'lg' \| 'icon-xs' \| 'icon-sm' \| 'icon' \| 'icon-lg'`	`'default'`	按钮尺寸。
disabled	`boolean`	`false`	原生 button 时阻止交互。
as / asChild	`string \| Component / boolean`	`'button' / false`	选择语义元素或将样式合并到唯一子元素。
dataSlot	`string`	`'button'`	覆盖公开 data-slot，供复合组件使用。

无障碍说明

默认输出原生 button 并保留键盘、焦点与 disabled 语义。仅图标按钮必须提供 aria-label；链接应使用 as="a" 和有效 href。

关联组件

按钮编组切换控件