BreezeUI
  • 简体中文

    • Button 按钮

    用于触发动作或进行交互。基于 BrConfigProvider 实现全局主题配置。

    组件特性

    • 🎨 8 种视觉变体：支持 solid、outline、ghost、soft、link、subtle、dashed、default。
    • 🌈 多种颜色：支持 default、primary、secondary、success、warning、danger、info、carbon。
    • 📏 多种尺寸：支持 xs、sm、md、lg、xl、2xl、default 尺寸规格。
    • 🖼️ 图标支持：prefix 和 suffix 插槽，支持图标前后布局。
    • ⏳ 加载状态：支持 loading 属性显示加载动画。
    • ❌ 禁用状态：支持 disabled 属性。
    • 🔄 圆角样式：支持 rounded、rounded-sm、rounded-md、rounded-lg、rounded-xl、rounded-full。
    • 🎨 主题定制：基于 BrConfigProvider 支持全局主题配置和 TailwindCSS 局部覆盖。

    基础用法

    <script setup>
import { BrButton } from '@breezeui/vue'
</script>

<template>
  <BrButton>Button</BrButton>
</template>

    变体

    使用 variant 属性来控制按钮的视觉风格。

    • Solid: 默认填充样式。
    • Outline: 默认透明边框。悬停时显示背景。
    • Plain: 带默认文本颜色的边框样式。悬停时变为主题色。
    • Pure: 完全无样式（无内边距、高度或边框）。可用作包装器。
    • Dashed: 虚线边框样式。
    • Soft: 带有主题文本颜色的浅色背景。
    • Ghost: 透明背景，悬停时改变。
    • Link: 文本链接样式。

    所有变体

    <script setup>
import { BrButton } from '@breezeui/vue'
</script>

<template>
  <div class="flex items-center gap-6 flex-wrap">
    <BrButton variant="solid">Solid</BrButton>
    <BrButton variant="outline">Outline</BrButton>
    <BrButton variant="dashed">Dashed</BrButton>
    <BrButton variant="soft">Soft</BrButton>
    <BrButton variant="ghost">Ghost</BrButton>
    <BrButton variant="link">Link</BrButton>
    <BrButton variant="plain">Plain</BrButton>
    <BrButton variant="pure">Pure</BrButton>
  </div>
</template>

    颜色

    使用 color 属性来控制按钮的颜色主题。

    <script setup>
import { BrButton } from '@breezeui/vue'
</script>

<template>
  <div class="flex items-center gap-6 flex-wrap">
    <BrButton color="default">Default</BrButton>
    <BrButton color="primary">Primary</BrButton>
    <BrButton color="secondary">Secondary</BrButton>
    <BrButton color="success">Success</BrButton>
    <BrButton color="warning">Warning</BrButton>
    <BrButton color="danger">Danger</BrButton>
    <BrButton color="info">Info</BrButton>
    <BrButton color="carbon">Carbon</BrButton>
    <BrButton color="accent">Accent</BrButton>
  </div>
</template>

    尺寸

    使用 size 属性来控制按钮的大小。

    <script setup>
import { BrButton } from '@breezeui/vue'
import { ChevronRight } from 'lucide-vue-next'
</script>

<template>
  <div class="flex items-center gap-6 flex-wrap">
    <BrButton size="xs">Extra Small</BrButton>
    <BrButton size="sm">Small</BrButton>
    <BrButton size="default">Default</BrButton>
    <BrButton size="md">Medium</BrButton>
    <BrButton size="lg">Large</BrButton>
    <BrButton size="xl">Extra Large</BrButton>
    <BrButton size="2xl">2X Large</BrButton>
    <BrButton size="icon">
      <ChevronRight class="h-4 w-4" />
    </BrButton>
  </div>
</template>

    图标

    你可以使用 prefix 或 suffix 插槽添加图标，或者将它们组合在默认插槽中。

    <script setup>
import { BrButton } from '@breezeui/vue'
</script>

<template>
  <div class="flex gap-4">
    <BrButton>
      <template #prefix>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
      </template>
      Login with Email
    </BrButton>
    <BrButton variant="outline">
      Loading
      <template #suffix>
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
      </template>
    </BrButton>
  </div>
</template>

    加载状态

    设置 loading 属性为 true 以显示加载状态。

    <script setup>
import { BrButton } from '@breezeui/vue'
</script>

<template>
  <BrButton loading>Please wait</BrButton>
</template>

    禁用状态

    设置 disabled 属性来禁用按钮。

    <script setup>
import { BrButton } from '@breezeui/vue'
</script>

<template>
  <BrButton disabled>Disabled</BrButton>
</template>

    圆角

    设置 rounded 属性为 true 以使用全圆角（药丸）样式。

    <script setup>
import { BrButton } from '@breezeui/vue'
</script>

<template>
  <BrButton rounded>Rounded Button</BrButton>
</template>

    主题定制

    全局定制 (BrConfigProvider)

    你可以通过 BrConfigProvider 的 theme 属性覆盖默认 CSS 变量。

    <script setup>
import { BrConfigProvider, BrButton } from '@breezeui/vue'

const theme = {
  primary: '#E11D48', // Rose 600
  primaryForeground: '#FFFFFF',
  radius: 0.75
}
</script>

<template>
  <BrConfigProvider :theme="theme">
    <div class="p-4 border rounded">
      <BrButton>Custom Theme Button</BrButton>
    </div>
  </BrConfigProvider>
</template>

    局部定制 (TailwindCSS)

    你可以直接使用 TailwindCSS 工具类覆盖样式。

    <template>
  <BrButton class="bg-indigo-500 hover:bg-indigo-600">自定义类名</BrButton>
</template>

    API

    Props

    名称类型默认值说明
    variantstring'solid'视觉风格变体: solid, outline, dashed, soft, ghost, link, plain, pure
    colorstring'default'颜色主题变体: default, primary, secondary, success, warning, danger, info, carbon, accent
    sizestring'default'尺寸变体: default, xs, sm, md, lg, xl, 2xl, icon
    asstring'button'渲染的 HTML 标签或组件
    disabledbooleanfalse是否禁用按钮
    loadingbooleanfalse是否显示加载状态
    roundedbooleanfalse是否使用全圆角样式
    typestring'button'原生 type 属性

    Slots

    名称说明
    default按钮内容
    prefix默认内容之前的内容（例如：图标）
    suffix默认内容之后的内容（例如：图标）

    Emits

    名称说明参数
    click点击事件(event: MouseEvent)